我有以下HTML
<ul id="nav">
<li>
<a href="#">Menu Item 1</a>
<ul class="sub_menu">
<!-- full of <li> sub menu items -->
</ul>
</li>
<li>
<a href="#">Menu Item 2</a>
<ul class="sub_menu">
<!-- full of <li> sub menu items -->
</ul>
</li>
<li>
<a href="#">Menu Item 3</a>
</li>
</ul>
#nav
是浏览器窗口宽度的100%。
仅使用CSS我希望将Menu Item
并排放在具有类似CSS的容器中:
{ width: 1000px; margin: 0 auto; }
但我希望.sub_menu
s与#nav
的宽度相同。
如何在不更改HTML的情况下完成此操作?
答案 0 :(得分:1)
您可以position: relative
#nav
,使用li
然后position: absolute; left: 0; right: 0
.sub_menu
来处理您的事情。
这种方式.sub_menu
的宽度与#nav
的宽度相同,与li
的宽度无关。你必须添加和调整一些更多的样式,使它看起来漂亮和位置,但我会把它留给你。
另一个要求是li
将position: static
保持.sub_menu
,因为#nav
的位置必须相对于{{1}}。
答案 1 :(得分:0)
Subnav UL现在具有与父li相同的宽度
#nav { width: 1000px; margin: 0 auto; }
ul{
margin:0;
padding:0;
list-style:none;
}
ul li{
display:block;
float:left;
padding: 5px 10px;
width:auto;
}
ul li:hover ul{
display:block;
}
ul li ul{
display:none;
width:100%;
background-color:red;
min-height:20px;
transition:all 0.3s;
}
ul li ul li{
display:block;
float:none;
}
答案 2 :(得分:0)
尝试以下(jsbin):
* { margin: 0; padding: 0 }
#nav, .sub_menu {
width: 100%;
height: 30px;
position: relative;
background: green;
}
#nav > li > a {
z-index: 1;
position: relative;
}
#nav > li {
float: left;
list-style-type: none;
}
.sub_menu {
position: absolute;
left: 0;
background: red;
top: 30px
}
这会使所有按钮一个接一个地保持子菜单100%宽度