我有一个主菜单#navi
。它的物品有不同的宽度。子菜单应该与父母一样宽。我制作了一个JsBin来演示它:http://jsbin.com/yusunohage/1
A very very very long submenu
不应超过其父A longer menu
。
以下是 HTML :
<ul id="navi">
<li class="menu1">Menu </li>
<li class="menu2">A longer menu
<ul class="children">
<li>A very very very long submenu</li>
<li>Submenu</li>
</ul>
</li>
<li class="menu3">Menu item</li>
</ul>
css
ol, ul {
list-style: none;
padding: 0;
}
#navi > li {
padding: 0 10px;
}
li {
float: left;
}
ul.children{
background: gold;
}
#navi li ul li {
float:none;
}
答案 0 :(得分:2)
问题:
css
宽度参数。<强>解强>
jQuery的:
$('.children li').css('width', 0);
$('.children li').css('width', $('.menu2').width());
答案 1 :(得分:0)
首先设置父元素的高度。然后关心子元素的宽度。
把它放在你的css代码中
.menu2{
max-width:140px;
}
这是Jsfiddle http://jsfiddle.net/nwL1hku4/
<强>被修改强>
如上所述,您不了解父元素的宽度。您可以为子元素指定 max-width ,以限制其宽度。