[英]CSS Menu - LI / A width
我正在创建一个CSS下拉菜单,到目前为止进展顺利,但我在子菜单中的<li>
或<a>
宽度有问题。
如果您将鼠标悬停在“关于我们”上,则所有子菜单链接的宽度都不同。 我已经尝试将两个元素设置为width: 100%
但是我猜这个问题与<ul>
绝对定位并且没有固定宽度有关。
能否请你指出正确的方向来解决这个问题。
注意:这可能不适用于早期版本的IE,这是我接下来要做的事情
看到这个更新的jsFiddle
将其宽度设置为auto。 我还包括一个z-index,因此它呈现在其他元素之上
HTML
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">The Team</a></li>
<li><a href="#">In The News</a></li>
</ul></li>
<li><a href="#">Our Work</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Resellers</a></li>
<li><a href="#">Our Contact</a></li>
</ul>
</div>
CSS
body{font: 13px verdana; margin: 10px}
#main-nav ul, #main-nav ul li ul {list-style: none; margin: 0; padding:0;}
#main-nav ul li{
display: block;
float: left;
position: relative;
}
#main-nav ul li a{
display: block;
height: 35px;
line-height: 35px;
background: lightblue;
padding: 0 10px;
color: black;
text-decoration: none;
}
#main-nav ul li a:hover{background: #EEE}
#main-nav ul li:hover ul{left: 0px;}
/* This is the bit I'm having a problem with */
#main-nav ul li ul{
position: absolute;
left: -9999px;
top:35px;
background: lightblue;
}
#main-nav ul li ul li {white-space: nowrap; width: 100%; z-index: 999}
尝试使用: width: auto;
而不是width: 100%;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.