javascript - 超级菜单问题

Question

我有一个大型菜单，我遇到了两个问题。

1. 当我将鼠标悬停在每个部分上时，我似乎无法保持悬停状态。
2. 触发巨型菜单的标题标签似乎具有它们所在容器的宽度。这会导致巨型菜单弹出，即使您没有在视觉上翻转它。

我在这里发布了我当前的超级菜单代码：http: //www.boyga.com/mega-menu/

我正在使用 hoverintent 插件。

Answer 1

问题 #2 很容易解决。将此 CSS 规则添加到您的样式表中：

ul#Top-Nav {
    display: inline-block;
}

问题 #1 几乎一样简单。这是更多的 CSS 更改。因为您的子菜单从<li> 而不是从 下降，所以<a>您需要更改涉及a:hover和的 CSS 规则a:active：

    ul#Top-Nav li:hover a{color:#1E90FF;text-decoration:none;}
    ul#Top-Nav li:hover a{background:#1E90FF url(arrow.png) no-repeat right center;color:#fff;}
    ul#Top-Nav li:active a{background:#1E90FF url(arrow.png) no-repeat right center;color:#fff;}

这对我有用，至少在 Chrome 上。您可能（阅读：可能）会在其他浏览器上遇到问题，其中:hover和:active伪类不会冒泡。