CSS下拉导航菜单悬停问题答案

【问题标题】：CSS Drop down nav menu hover issueCSS下拉导航菜单悬停问题
【发布时间】：2012-01-23 18:37:53
【问题描述】：

我纯粹在 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;
}

【问题讨论】：

标签： html css drop-down-menu

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

我为我的网站使用了列表 CSS 下拉菜单。代码很简单，你可以检查代码并使用相同的代码。

www.onwebsoft.com

只需复制我的源代码即可解决您的问题。这是如此简单和容易。如果您需要二级菜单，请告诉我，我将向您发送代码。

谢谢克

【讨论】：

最好能正确分享解决方案。