CSS Drop down nav menu hover issue

Question

I created a drop down nav menu purely in css and everything works correctly except the hover effects. When I high light one of the options in the horizontal menu it will show a red background and bring the first submenu down however once I move through the submenu the red background goes away from the top link and then goes on whatever link I highlight in the submenu. I also have 2nd level and 3rd level sub menus that I'd like to highlight as I move around but the red hover effect will only stay on one link at a time. Given my css code below what would I need to do to get the hover effect to anchor on each sub menu as I navigate through it. Also a link to the menu in action can be found here: http://www.clubkumite.com/menu.html

Thanks!

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
    padding: 0;
    margin: 0;
        font-size: 100%;
    font-weight: normal;
}
a {

   text-decoration: none;
   color: #47864D;
}

a:hover {
  color: #F93;
}

#nav {
    background-color: #F90;
    text-align: center;

}

#nav ul {
    display: table;
    height: 30px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    font-size: 14px;
}


#nav li { 
    display: table-cell;
    position: relative;
    width: 15em 
}

#nav a {
    display: block;
    width: 15em;
    color: #FFF;
    background-color: #F90;
    height: 35px;
    font-size: 14px;

} 

#nav a:hover {
    background-color: #900;
    width: 15em;


}

#nav li ul { 
    display: block;
    position: absolute; 
    width: 15em; 
    left: -999em;

} 

#nav li:hover ul { left: auto }

#nav li li, #nav li li a { display: block }

#nav li li a { width: auto; padding: 0 }

#nav li ul ul { /* third-and-above-level lists */
    margin: -2em 0 0 15em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
}

ptriek ptriek · Accepted Answer · 2011-12-19T16:54:54

Change #nav a:hover to #nav li:hover > a

#nav li:hover > a {
    background-color: #900;
    width: 15em;
}

The > makes sure you're not selecting all a's within the underlying submenu(s) - it selects just the top level a.

CSS Drop down nav menu hover issue

2 Answers