Question

每当我将鼠标悬停在菜单项上时，它会打开悬停背景+打开下拉菜单。但每当我将鼠标悬停在下拉列表时，背景就会消失？

examples以及它应该如何this

另外，当你看到盒子阴影覆盖它时。

代码：我的菜单html：

       <div class="secondheader">

      <div class="container">

               <div class="span12">

                          <ul class="nav6">

                          <li><a href="#">Home</a></li>

                           <li class="dropdown1"><a href="#">Categories</a>
                <ul>
                    <li class="substyle"><a href="#">Buy</a></li>
                    <li class="substyle"><a href="#">Sell</a></li>
                    <li class="substyle"><a href="#">Forums</a></li>
                    <li class="substyle"><a href="#">Contact</a></li>
                    <li class="substyle"><a href="#">item 1</a></li>
                    <li class="substyle"><a href="#">Forums</a></li>
                    <li class="substyle"><a href="#">Contact</a></li>
                    <li class="substyle"><a href="#">item 1</a></li>
                </ul>
            </li>

                          <li><a href="#">Buy</a></li>

                          <li><a href="#">Sell</a></li>

                          <li><a href="#">Forums</a></li>

                          <li><a href="#">Contact</a></li>

                          <li><a href="#">item 1</a></li>

                          <li><a href="#">Forums</a></li>

                          <li><a href="#">Contact</a></li>

                          <li><a href="#">item 1</a></li>

                          </ul>

                          </div>

               </div>

       </div>

</div>

我的菜单：

.nav6  {
list-style: none;
font-family: 'Dosis', sans-serif;
float: left
font-size: 20px;
margin-top: 13px;
margin-left: -35px;
}
.nav6>li>ul{
display:none;
position:absolute;
background:white;
overflow:hidden;
width: 150px;
background: #fbf2d3;
margin-top: 20px;
margin-left: -3px;
-webkit-box-shadow:  0px 1px 5px 0px #dadada;
box-shadow:  0px 1px 5px 0px #dadada;       
}
.nav6>li:hover>ul {
display:block;
}
.nav6 >li {
display: inline;
margin: 0px;
font-size: 18px;
font-family: 'Dosis', sans-serif;
float: left;
margin-top: 10px;
}
.substyle {
padding: 10px;
}
.substyle:hover {
background: #f54922;
padding: 10px;
-webkit-border-radius: 6px;
border-radius: 6px;
color: #fff;
}
.subsyle a:hover {
color: #fff;
}
.nav6>li>a {
padding-top: 20px;

padding-bottom: 20px;

padding-left: 20px;

padding-right: 20px;

}
.nav6 a{color: #7D7253;}

.nav6 a:hover {
color: #fff;

text-decoration: none;
}
.nav6 > li > a:hover {
background-image: url("../img/hoverbg.png");    
}

问题：＆gt;选择器究竟做到了吗？你能用一个简单的例子向我解释一下吗？非常感谢你！

Answer 1

当您在整个li上盘旋时，您需要添加一个显示悬停图像的类，而不仅仅是孩子li。尝试将您的最后一种风格改为：

.nav6 > li > a:hover, .nav6 > li:hover > a {
    background-image: url("../img/hoverbg.png");    
}

此外，＆gt;选择器特别说父母的“直接孩子”。所以如果你有这个：

<div>
    <p><span></span></p>
    <span></span>
</div>

然后这将适用于所有跨度：

div span {}

这仅适用于第二个范围：

div > span {}

其中任何一个都只适用于第一个范围：

div p span {}
div > p > span {}

在最后一种情况下，你不会使用＆gt; - 只有在你特别需要只针对直接孩子时才使用它。

Answer 2

转到w3schools了解选择器的整体知识如果对认真学习感兴趣，你可以去 saylor免费教育。

我们认为>是其中的含义因此，.nav6>li表示＆＃34;在＆＃34;内nav6类

Answer 3

您只需在此课程中进行更改.nav6 > li > a:hover {}

并写入此格式.nav6 > li:hover a {}

这将正常工作............

将鼠标悬停在下拉菜单中时，CSS菜单链接背景不会停留

3 个答案: