Mega Menu Issues
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 se
Solution 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.
Post a Comment for "Mega Menu Issues"