我正在创建一个到目前为止运行良好的 CSS 下拉菜单,但是我对 <li>
的宽度有疑问。或 <a>
在子菜单中。
如果您将鼠标悬停在“关于我们”上,您将看到所有子菜单链接的宽度都不同。我试过将这两个元素都设置为 width: 100%
但我猜这个问题与 <ul>
有关绝对定位且没有固定宽度。
能否请您指出正确的方向来解决此问题。
注意:这可能不适用于早期版本的 IE,这是我接下来要做的事情
最佳答案
查看此更新 jsFiddle
将它的宽度设置为自动。我还包含了一个 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}
关于html - CSS 菜单 - LI/A 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9655213/