Search code examples
javascriptjquerycssmegamenu

Mega Menu Issues

I have a mega menu I've been having two issues with.

  1. I can't seem to keep the hover state active when I'm hovering over each section.
  2. 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.

Solution

  • 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.