CSS menu options

Question

I am creating a menu bar with rollovers, when i roll over the option the background and text colour change but when i move my mouse down to the sub menu that appeared with hovering on the menu the text colour changes back but the background stays.

This is my HTML for the menu bar:

<div id="menuBar"> 
  <div id="nav">
   <div id="nav_wrapper">
    <ul>
        <li class="bar"><a href="index.php">Home</a>
        </li>
        <li class="bar"> <a href="#">Services</a>
        </li>
        <li class="bar"> <a href="#">Sales &rarr;</a>

            <ul>
                <li class="bar"><a href="#">dropdown #1 item #1</a>
                </li>
                <li class="bar"><a href="#">dropdown #1 item #2</a>
                </li>
                <li class="bar"><a href="#">dropdown #1 item #3</a>
                </li>
            </ul>
        </li>
        <li class="bar"> <a href="#">Repairs &rarr;</a>

            <ul>
                <li class="bar"><a href="#">Bar</a>
                </li>
                <li class="bar"><a href="#">Kitchen</a>
                </li>
                <li class="bar"><a href="#">dropdown #2 item #3</a>
                </li>
            </ul>
        </li>
        <li class="bar"> <a href="#">Installations</a>
        </li>
        <li class="bar"> <a href="contactUs.php">Contact Us</a>
        </li>
    </ul>
</div>
<!-- Nav wrapper end -->

And the CSS that im using:

#menuBar {
    background:#FF0;
    box-shadow:5px 5px 2px #888888;
    position:absolute;
    height:55px;
    width:1000px;
    left:0;
    right:0;
    margin:auto;
    top:253px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    behavior: url(/css/border-radius.htc);
    z-index:5;
}

#nav {
    padding: 0;
    margin: 0;
    font-family: Arial;
    font-size: 21px;
    left:0;
    right:0;
    margin:auto;
}
#nav_wrapper {
    width: 960px;
    margin: 0 auto;
    text-align: center;
}

#nav a {
    color:#0000FF;  
}

#nav a:hover {
    color:#FF0; 
}
#nav a:active {
    color:#FF0; 
}

#nav a::focus {
    color:#FF0; 
}

#nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    min-width: 200px;
}
#nav ul li {
    display: inline-block;
}
#nav ul li:hover {
    background-color: #00F;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    color:#FF0;
    border-radius: 10px;
    behavior: url(/CSS/border-radius.htc);
}
#nav ul li a, visited {
    display: block;
    padding: 15px;
    text-decoration: none;
}
#nav ul li:hover ul {
    display: block;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    color:#FF0;
    border-radius: 15px;
    behavior: url(/CSS/border-radius.htc);
}
#nav ul ul {
    display: none;
    position: absolute;
    background-color: #FFFF00;
    border: 3px solid #00F;
    border-top: 1;
    margin-left: -5px;
}
#nav ul ul li {
    display: block;
}
#nav ul ul li a:hover {
     color:#FF0;
}

.bar {
    color:#FF0;
}

Im sure that im missing something simple but i cant find it at all. Help!

Answer 1

Building on what Niet the Dark Absol said:

you would need to add styles (notice the > - this selects ONLY direct children, works with IE8+ and elsewhere)

#nav ul li:hover > a {
    color: #ff0;
}

and you can probably remove this because it would be redundant:

#nav ul ul li a:hover {
    color:#FF0;
}

Answer 2

You are applying the color change to a:hover, but the background-color change to li:hover.

Both must be on the li:hover to work. You may need to add color:inherit to the a elements within the menu to ensure natural link colours don't override the setting.