每当我将鼠标悬停在菜单项上时,它都会打开悬停背景+打开下拉菜单。但是每当我悬停下拉菜单时,背景就会消失?
查看实时预览
此外,正如您所见,盒子阴影越过它。
代码:我的菜单 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>
我的 CSS 菜单:
.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");
}
问题: > 选择器究竟做了什么?你能用一个简单的例子解释一下吗?非常感谢!