css - 如何从左到右放置 DIV 并仅从第一项中获取宽度？

Question

我想通过以下方式为菜单设置 DIV 样式：

其中红色是菜单栏，青色是下拉菜单，绿色是菜单的头部。菜单头可以比其他菜单项短，因此在布局菜单时只应考虑菜单头。

这有可能实现吗？

我的测试在这里：http: //jsfiddle.net/suzancioc/W2W45/2/

<div class='menubar'>
<div class='menu'>
   <div class='menuhead'>menu 1</div>
   <div class='menubody'>
       long item name 1.1</br>
       long item name 1.2</br>
       long item name 1.3</br>          
   </div>
</div>
<div class='menu'>
   <div class='menuhead'>menu 2</div>
   <div class='menubody'>
       long item name 2.1</br>
       long item name 2.2</br>
       long item name 2.3</br>          
   </div>
</div>
</div>

和 CSS

.menubar {
   /*some fancy css*/
   height:20px;
   background:red;
}
.menu {
   float:left;
   margin:1px;
   background: cyan;
}
.menuhead {
    background: green;
}

如您所见，菜单宽度似乎是根据所有行长度计算的，而不仅仅是头部。

Answer 1

如果我正确理解您的意图，您需要通过添加.menubody{position:absolute;}规则来使用绝对定位。我已经分叉了你的 jsfiddle 并应用了它，悬停 .menuheads 来查看.menubodys。网址在这里：http: //jsfiddle.net/goktugkayaalp/3usYQ/