当我们将鼠标悬停在下拉菜单上时，CSS li 应该保持活动状态答案

【问题标题】：CSS li should remain active when we hover on the dropdown当我们将鼠标悬停在下拉菜单上时，CSS li 应该保持活动状态
【发布时间】：2014-09-17 05:47:06
【问题描述】：

我正在尝试在 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;
}

【问题讨论】：

当你说active时，你的意思是li中的anchor应该有background:#002d49; color:#FFFFFF;} ...??
是的 li 应该在背景中处于活动状态：#002d49;

标签： css navigation hover

【解决方案1】：

在您的 CSS 中添加以下样式。

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

DEMO

【讨论】：

我想建议更改li 而不是a 上的悬停效果，但是当我编辑代码时，我发现它需要两个额外的规则和比预期更多的调整。这是最简单的解决方案！ +1
谢谢@Suresh Ponnukalai

【解决方案2】：

让我知道这是否有帮助？

我从 a:hover 中移除了背景和文本颜色的变化，并补充说它被应用于 ul:hover 上的 a 标签

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

在前面的代码中，一旦你将鼠标悬停在父 li 上，锚就会回到原来的背景颜色 #fff

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

【讨论】：