php - CSS 菜单选项

Question

我正在创建一个带有鼠标悬停的菜单栏，当我将鼠标悬停在选项上时，背景和文本颜色会发生变化，但是当我将鼠标向下移动到悬停在菜单上时出现的子菜单时，文本颜色会变回但背景留下来。

这是我的菜单栏 HTML:

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

我使用的 CSS:

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

我确信我遗漏了一些简单的东西，但我根本找不到。 帮助!

Answer 1

基于 Niet the Dark Absol 所说的内容:

您需要添加样式(注意 > - 这仅选择直接子项，适用于 IE8+ 和其他地方)

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

你可能会删除它，因为它是多余的:

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