问题
I have a mega menu I've been having two issues with.
- I can't seem to keep the hover state active when I'm hovering over each section.
- The header tags that trigger the mega menu seem to have a width of the container that they are in. This causes the mega menu to pop up even if you don't rollover it visually.
I posted my current code for the mega menu here: http://www.boyga.com/mega-menu/
I'm using the hoverintent plug-in.
回答1:
Issue #2 is easy to fix. Add this CSS rule to your stylesheet:
ul#Top-Nav {
display: inline-block;
}
Issue #1 is almost as simple. It's more CSS changes. Because your submenu descents from the <li> but not the <a>, you need to change your CSS rules that involve a:hover and 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;}
This works for me, at least on Chrome. You may (read: probably) will have issues on other browsers, where the :hover and :active pseudo-classes don't bubble up.
来源：https://stackoverflow.com/questions/4674834/mega-menu-issues