CSS菜单选项

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