超级菜单问题[关闭]

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 和a:active 的CSS 规则：

    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 伪类不会冒泡。