JSFIDDLE
如果您将鼠标悬停在产品上,则会出现一个下拉菜单(显示设备和其他),然后当您将光标悬停在设备上时,会出现另一个子菜单(显示黑色和白色),但第二个子菜单似乎比父菜单低2-3像素。是什么CSS导致它更低?
这是CSS:
*{
margin: 0px;
padding: 0px;
}
#navbar{
list-style: none;
float: right;
padding-top: 54px;
position: relative;
}
#navbar li{
float:left;
width: 130px;
text-align: center;
}
#navbar li a{
text-decoration: none;
font-family: "Open Sans", sans-serif;
font-size: 12px;
color: #524F4F;
font-weight: 600;
}
#navbar li a:hover{
color: #f3a82e;
}
#navbar ul{
list-style: none;
display: none;
position: absolute;
top: 100%;
}
.firstnavmenu{
padding-top: 10px;
}
#navbar ul li{
float: none;
position: relative;
background-color:#f9f9f9;
height: 30px;
border-top: 3px solid white;
}
#navbar ul li a{
padding-top: 6px;
width: 100%;
height: 100%;
display: block;
}
#navbar li:hover > ul{
display: block;
}
#navbar li li:hover{
background-color: #edeaea;
}
#navbar ul ul{
position: absolute;
left: 100%;
top:0;
display: none;
}
#navbar ul ul:hover > ul {
display: block;
}
这里是html:
<ul id="navbar">
<li>
<a href="#">PRODUCTS</a>
<ul class="firstnavmenu">
<li>
<a href="#">APPLIANCE</a>
<ul>
<li><a href="#">BLACK </a></li>
<li><a href="#">WHITE</a></li>
</ul>
</li>
<li><a href="#">OTHER</a></li>
</ul>
</li>
<li>
<a href="#">TECHNOLOGY</a>
</li>
<li>
<a href="#">PARTNERS</a>
</li>
<li>
<a href="#">COMPANY</a>
</li>
</ul>
您的3像素纯白边框。
将其从第二个ul li:first-child
中移除
#navbar ul ul li:first-child {
border-top:none;
}
将其添加到您的css 中
ul.firstnavmenu li ul{
margin-top:-3px;
}
演示