悬停在下拉菜单上时如何保持列表项处于活动状态？答案

【问题标题】：How to keep list item in active state whilst hovering on dropdown?悬停在下拉菜单上时如何保持列表项处于活动状态？
【发布时间】：2013-09-11 15:18:41
【问题描述】：

我正在我的网站上创建一个下拉菜单，并且除了一件事之外或多或少地成功完成了任务。

当鼠标悬停在下拉菜单上时，主菜单链接的悬停状态消失了，因为我不再悬停在它上面。

如何在将鼠标悬停在下拉项上时保持链接上的活动状态样式？

我已将代码复制到http://cssdesk.com/PZBM2，如果您将鼠标悬停在第一个列表项上，您将看到我正在谈论的悬停状态和下拉菜单。

这里也是代码：

/*Main nav*/
.main_nav_container{
    margin-top:10px;
    margin-bottom:10px;
    display:block;
    float:right;
}
ul.main_nav{
    margin:0;
    padding:0;
}
ul.main_nav li{
    display:inline-block;
    margin:0;
    padding:0;
}
ul.main_nav li a{
    font-size:13px;
    display:block;
    font-weight:bold;
    position:relative;
    height:25px;
    line-height:25px;
    padding:0 13px;
    text-decoration:none;
    color:#1122cc;
    border:1px solid transparent;
}
ul.main_nav li a:hover{
    text-decoration:underline !important;
    border-top:solid 1px #ccc;
    border-left:solid 1px #ccc;
    border-right:solid 1px #ccc;
}
ul.main_nav li ul{
    display:none;
    position:absolute;
    background: #fff;
    margin:0;
    padding:0;
    border:solid 1px #ccc;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
}
ul.main_nav li ul:hover #hover{
    border:#ccc 1px solid;
}
ul.main_nav li ul li{
    display:block;
    margin:0;
    padding:0;
    text-align:left;
}
ul.main_nav li ul li a{
    font-weight:normal;
}
ul.main_nav li:hover ul{
    display:inline;
}

HTML

<div class="main_nav_container">
    <ul class="main_nav">
        <li>
            <a id="hover" href="#">For sale</a>
            <ul>
                <li><a href="#">Property for sale</a></li>
                <li><a href="#">New homes for sale</a></li>
                <li><a href="#">Find estate agents</a></li>
            </ul>
        </li>
        <li><a href="#">To rent</a></li>
        <li><a href="#">New homes</a></li>
        <li><a href="#">House prices</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Property advice</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

【问题讨论】：

标签： css hover

【解决方案1】：

你应该替换

ul.main_nav li a:hover{
    text-decoration:underline !important;
    border-top:solid 1px #ccc;
    border-left:solid 1px #ccc;
    border-right:solid 1px #ccc;
}

与

ul.main_nav li:hover{
    text-decoration:underline !important;
    border-top:solid 1px #ccc;
    border-left:solid 1px #ccc;
    border-right:solid 1px #ccc;
}

在你的 CSS 中。享受！ :)

【讨论】：

支持 :hover 的非链接元素也可能存在问题。小心！