html - 从父元素强制宽度

Question

我有一个主菜单#navi。它的元素有不同的宽度。子菜单的宽度应与其父菜单相同。我制作了一个 JsBin 来演示它:http://jsbin.com/yusunohage/1

一个非常非常非常长的子菜单不应该比它的父级一个更长的菜单宽。

这是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;
}

Answer 1

问题:

• 在不固定 css 宽度参数的情况下让父元素限制子元素。

解决方案

• 将子宽度设置为 0px 以测量原生父宽度。
• 测量后使用父宽度设置子宽度。

jQuery:

$('.children li').css('width', 0);
$('.children li').css('width', $('.menu2').width());

此处的解决方案:http://jsfiddle.net/urahara/4m5vkkk2/2/