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.