Question

我正在尝试在css中进行导航，但当我将鼠标悬停在下拉菜单上时，父<li>不会保持活动状态。请忽略图像，因为它在本地驱动器上不可见。

请在下面找到代码：

        <div class="nav"><!--nav start-->
        <ul class="icons_nav">
            <li><a href="#"><img src="images/inventory_icon.png" /><span>Inventory</span></a>
             <ul class="dropdown1">
               <li><a href="#">Sales</a></li>
               <li><a href="#">Purchase</a></li>
               <li><a href="#">Closing Stock</a></li>
             </ul></li>
            <li><a href="#"><img src="images/accounts_icon.png" /><span>Accounts</span></a>
             <ul class="dropdown2">
               <li><a href="#">Sales</a></li>
               <li><a href="#">Purchase</a></li>
               <li><a href="#">Closing Stock</a></li>
             </ul></li>
            <li><a href="#"><img src="images/loyalty_icon.png" /><span>Loyalty Customer</span></a>
            <ul class="dropdown3">
               <li><a href="#">Sales</a></li>
               <li><a href="#">Purchase</a></li>
               <li><a href="#">Closing Stock</a></li>
             </ul></li>
        </ul>
        <div class="clear"></div>
    </div><!--nav end-->

CSS

.nav {
    width:690px;
    margin:10px auto;
    overflow:hidden;
}
.nav > ul.icons_nav {
    list-style:none;
}
.nav > ul.icons_nav > li {
    float:left;
}
.nav > ul.icons_nav > li > a {
    color:#002d49;
    font-size:16px;
    font-weight:bold;
    float:left;
    width:200px;
    height:46px;
    background:#fff;
}
.nav > ul.icons_nav > li > a:hover {
    background:#002d49;
    color:#FFFFFF;
}
.nav > ul.icons_nav > li > a > img {
    margin:8px 0 0 8px;
    float:left;
}
.nav > ul.icons_nav > li > a > span {
    float:left;
    margin:14px 0 0 10px;
}
.nav > ul.icons_nav > li > ul.dropdown1 {
    background:#002d49;
    overflow:hidden;
    width:690px;
    height:40px;
    position:absolute;
    margin:46px 0 0 0;
    display:none;
}
.nav > ul.icons_nav > li > ul.dropdown2 {
    background:#002d49;
    overflow:hidden;
    width:690px;
    height:40px;
    position:absolute;
    margin:46px 0 0 -230px;
    display:none;
}
.nav > ul.icons_nav > li > ul.dropdown3 {
    background:#002d49;
    overflow:hidden;
    width:690px;
    height:40px;
    position:absolute;
    margin:46px 0 0 -460px;
    display:none;
}
.nav > ul.icons_nav > li > a.active {
    background:#002d49;
}
.nav > ul.icons_nav > li > ul > li {
    float:left;
    width:230px;
}
.nav > ul.icons_nav > li > ul > li > a {
    color:#FFFFFF;
    margin:10px 0 0 20px;
    display:block;
}
.nav > ul.icons_nav > li > ul > li > a:hover {
    text-decoration:underline;
}
.nav > ul.icons_nav > li:hover ul {
    display:block;
}

Answer 1

在CSS中添加以下样式。

.nav > ul.icons_nav > li:hover a{background:#002d49; color:#fff;}

DEMO

Answer 2

请告诉我这是否有帮助？

我将背景和文字颜色更改为a：hover并添加它应用于ul：hover上的a标记

.nav > ul.icons_nav > li:hover a {background-color:#002d49; color:#FFFFFF;}

在上一段代码中，一旦你将父li悬停，锚就会返回原来的bg颜色#fff

演示：http://jsfiddle.net/bnxaqua4/

当我们将鼠标悬停在下拉列表上时，CSS li应保持活动状态

2 个答案: