Question

在以下代码中，当我将下拉列表＃1项目＃1 悬停时，下拉列表＃1项目＃1 的悬停效果会消失，我需要让它保持不变，直到我离开那个菜单项及其子项。

HTML页面

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="navmenu.css">

</head>
<body>

<div id="nav">
    <div id="nav_wrapper">
        <ul>
            <li><a href="#">item #1</a>
            </li>
            <li> <a href="#">item #2</a>
            </li>
            <li> <a href="#">dropdown #1</a>

                <ul>
                    <li><a href="#">dropdown #1 item #1</a>
                    </li>
                    <li><a href="#">dropdown #1 item #2</a>
                    </li>
                    <li><a href="#">dropdown #1 item #3</a>
                    </li>
                </ul>
            </li>
            <li> <a href="#">dropdown #2</a>

                <ul>
                    <li><a href="#">dropdown #2 item #1</a>
                    </li>
                    <li><a href="#">dropdown #2 item #2</a>
                    </li>
                    <li><a href="#">dropdown #2 item #3</a>
                    </li>
                </ul>
            </li>
            <li> <a href="#">item #3</a>
            </li>
        </ul>
    </div>
    <!-- Nav wrapper end -->
</div>
<!-- Nav end -->

</body>
</html>

CSS文件

#body {
    padding: 0;
    margin: 0;
    font-family: Arial;
    font-size: 17px;
}
#nav {

}
#nav_wrapper {
    width: 960px;
    margin: 0 auto;
    text-align: left;
}
#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: #ffb108;

}

#nav ul li a{
    color: #ffb108;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-weight:bold;
    display: block;
    padding: 15px;
    text-decoration: none;
}
#nav ul li a:visited{

    color:#FFF;

    }

#nav ul li a:hover{

    color:#FFF;

    }


#nav ul li:hover ul {
    display: block;
}
#nav ul ul {
    display: none;
    position: absolute;
    background-color:  #ffb108;

    border-top: 0;
    margin-left: 0px;
}
#nav ul ul li {
    display: block;
}
#nav ul ul li a{
    color: #FFF;
}
#nav ul ul li a:hover {
    color: #333;
}

Answer 1

您需要添加以下内容：

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

这会在悬停的li中标记一个标记。希望有意义！

Answer 2

原因是您有：hover会更改应用于<a>的颜色，而不是<li>。您应该将<li>样式悬停在<a>上并且它将正常工作。 CSS：

#nav ul li:hover a{

    color:#FFF;

    }

JSFiddle Demo

CSS：下载访问的导航菜单

2 个答案: