超级菜单问题

Question

我有一个大型菜单我一直有两个问题。

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

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

我正在使用hoverintent插件。

Answer 1

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

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

问题＃1几乎一样简单。这是更多的CSS更改。因为您的子菜单来自<li＆gt;但不是<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伪类不会冒泡。