大型菜单问题

Question

我有一个巨大的菜单，我已经有两个问题了。

1. 当我悬停在每个部分时，我似乎无法保持悬停状态活跃。
2. 触发Mega菜单的标题标签似乎具有它们所在的容器的宽度。这会导致Mega菜单弹出，即使您不直观地滚动。

我在此处发布了当前的Mega菜单代码： http://www.boyga.com/mega-menu/

我正在使用HoverIntent插件。

Answer 1

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

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

第1期几乎同样简单。还有更多的CSS改变。因为您的子菜单从 <li>但不是 <a>, ，您需要更改涉及的CSS规则 a:hover 和 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 伪级不会起泡。