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;
}   

Answer 1

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 .

Answer 2

I used the list css drop menus for my website. The code is so simple you can check the code and can use the same.

www.onwebsoft.com

Just copy my sourse and you can resolve your issue. That is so simple and easy. If you need 2nd level of menu let me know i will send you code.

Thanks K