0
如果你將鼠標懸停在產品,一個下拉菜單會出現(顯示設備等),那麼當你將鼠標懸停在家電,另一個子菜單將出現(顯示黑色和白色),然而,這第二子似乎是比父菜單低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>
這裏有一個小提琴顯示此解決方案:http://jsfiddle.net/tGUZu/ 2/ – showdev
有沒有辦法保持邊界並讓它們保持相同的高度?我需要那個白色的上邊界。 –
如果你想保留邊界(但是真的,爲什麼你需要它在第一個元素?),但罰款...說你...然後只是給第二個UL負的頂部邊緣像'#navbar ul ul { margin-top:-3px;}' – feitla