html - CSS下拉导航菜单悬停问题

Question

我纯粹用 css 创建了一个下拉导航菜单，除了悬停效果外，一切正常。当我突出显示水平菜单中的一个选项时，它会显示红色背景并将第一个子菜单向下移动，但是一旦我在子菜单中移动，红色背景就会从顶部链接消失，然后继续我在子菜单。我还有第 2 级和第 3 级子菜单，我想在四处移动时突出显示它们，但红色悬停效果一次只会停留在一个链接上。鉴于我的 css 代码如下，当我浏览它时，我需要做什么才能使悬停效果锚定在每个子菜单上。还可以在此处找到实际菜单的链接:http://www.clubkumite.com/menu.html

谢谢!

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

将 #nav a:hover 更改为 #nav li:hover > a

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

确保您没有选择底层子菜单中的所有 a - 它只选择顶级 a.