如何将列表项保持活动状态，同时将鼠标悬停在下拉菜单上？ [英] How to keep list item in active state whilst hovering on dropdown?

问题描述

我在我的网站上创建一个下拉菜单，除了一件事之外，已成功完成任务。

I am creating a dropdown menu on my website and have more or less completed the task successfully apart from one thing.

当鼠标悬停在下拉菜单上时，悬停

When hovering on the dropdown menu, the hover state of the main menu link disappears due to the fact that I am no longer hovering on it.

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

How can I keep the active state styling on the link whilst hovering on the dropdown items?

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

I have copied the code to http://cssdesk.com/PZBM2 if you hover the first list item you will see the hover state I am talking about and the dropdown.

这里的代码也是：

/*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>

推荐答案

您应该替换

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;
}

请享用！ ：）

这篇关于如何将列表项保持活动状态，同时将鼠标悬停在下拉菜单上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！