Question

I have a small problem with a drop-down navigation menu.

When hovering over an item with a submenu, the hover state activates and the submenu drops down correctly. But once you mouse into into the submenu, the original menu item reverts from its hover background color to the original state.

Is there a way to keep the background hover state the same when going into the submenu? To complicate it, each menu item with a submenu is a different color as well.

HTML:

<nav id="topNav"> 
        <ul>
            <li><a href="#" title="About">About</a></li>
            <li id="learn"><a href="#" title="Learn">Learn</a>
                <ul>
                    <li><a href="#" title="News">News</a></li>
                    <li><a href="#" title="Research">Research</a></li>
                    <li><a href="#" title="Simulcasts">Simulcasts</a></li>
                    <li><a href="#" title="Fellowships">Fellowships</a></li>
                    <li><a href="#" title="Internships">Internships</a></li>
                </ul>
            </li>
            <li id="connect"><a href="#" title="Connect">Connect</a>
                <ul>
                    <li><a href="#" title="News">News</a></li>
                    <li><a href="#" title="Research">Research</a></li>
                    <li><a href="#" title="Simulcasts">Simulcasts</a></li>
                    <li><a href="#" title="Fellowships">Fellowships</a></li>
                    <li><a href="#" title="Internships">Internships</a></li>
                </ul>
            </li>
            <li id="invest"><a href="#" title="Invest">Invest</a>
                <ul>
                    <li><a href="#" title="News">News</a></li>
                    <li><a href="#" title="Research">Research</a></li>
                    <li><a href="#" title="Simulcasts">Simulcasts</a></li>
                    <li><a href="#" title="Fellowships">Fellowships</a></li>
                    <li><a href="#" title="Internships">Internships</a></li>
                </ul>
            </li>
        </ul>
    </nav>

JS:

(function($){

$(document).ready(function() {
    //cache nav
    var nav = $("#topNav");

    //add hover animations to submenu parents
    nav.find("li").each(function() {
        if ($(this).find("ul").length > 0) {

            //show subnav on hover
            $(this).mouseenter(function() {
                $(this).find("ul").stop(true, true).slideDown(200);             
            });

            //hide submenus on exit
            $(this).mouseleave(function() {
                $(this).find("ul").stop(true, true).slideUp(50);
            });
        }
    });
});

CSS:

nav { display:block; position:relative; z-index: 600; 
nav ul { padding:0; margin:0; }  
nav li { position:relative; float:left; list-style-type:none; }  
nav ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }  
nav li a { display:block; width: 68px; padding: 18px 35px 53px 9px; color:#fff; border-right: 1px solid #D0D2D3; text-decoration:none; }  
nav li a:focus { outline:none; text-decoration:underline; }  
nav a span { display:block; float:rightright; }  
nav a:hover { background-color: #e5e6e7; color: #4D4D4D; }
nav ul ul { display:none; position:absolute; left:0; }  
nav ul ul li { float:none; }  
nav ul ul a { width: 199px; padding:13px; border-right:none; border-bottom: 1px solid #fff; }  
nav ul li:nth-child(2) { background-image: url('../images/nav-turquoise.png'); background-repeat: no-repeat; background-position: top right; } 
nav ul li:nth-child(3) { background-image: url('../images/nav-purple.png'); background-repeat: no-repeat; background-position: top right; }
nav ul li:nth-child(4) { background-image: url('../images/nav-orange.png'); background-repeat: no-repeat; background-position: top right; }
nav ul li:nth-child(2) a:hover { background-color: #14C7C4; color: #4D4D4D; background-image: url('../images/nav-grey.png'); background-repeat: no-repeat; background-position: top right; }
nav ul li:nth-child(3) a:hover { background-color: #A36CC8; color: #4D4D4D; background-image: url('../images/nav-grey.png'); background-repeat: no-repeat; background-position: top right; }
nav ul li:nth-child(4) a:hover { background-color: #FBB600; color: #4D4D4D; background-image: url('../images/nav-grey.png'); background-repeat: no-repeat; background-position: top right; }
#learn ul li { background-color: #14C7C4; background-image: none; }
#connect ul li { background-color: #A36CC8; background-image: none; }
#invest ul li { background-color: #FBB600; background-image: none; }
#learn ul li a:hover { background-color: #27a3a4; color: #fff; background-image: none; }
#connect ul li a:hover { background-color: #865e97; color: #fff; background-image: none; }
#invest ul li a:hover { background-color: #d39b13; color: #fff; background-image: none; }

Answer 1

I apply my :hover styles to the li instead of the a. Technically, as your menu is nested list items, by hovering over sub-menu items you are still hovering over the parent li and therefore the style will stick.

Hope that helps