Question

我创建了一个纯粹在css中的下拉导航菜单，除了悬停效果外，一切正常。当我高亮显示水平菜单中的一个选项时，它将显示红色背景并将第一个子菜单调低，但是一旦我在子菜单中移动，红色背景离开顶部链接，然后继续我突出显示的任何链接子菜单。我还有二级和三级子菜单，我想在我四处移动时突出显示，但红色悬停效果一次只能保留在一个链接上。鉴于我下面的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。

Answer 2

我使用了我的网站列表css下拉菜单。代码非常简单，您可以检查代码并使用相同的代码。

www.onwebsoft.com

只需复制我的信息，即可解决您的问题。这很简单容易。如果您需要第二级菜单，请告诉我我会发给您代码。

由于 ķ

CSS下拉导航菜单悬停问题

2 个答案: