如何从左到右放置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;}规则来使用absoulute定位。我已经将你的jsfiddle分叉并应用它，将.menuhead悬停在.menubody上。网址在这里：http://jsfiddle.net/goktugkayaalp/3usYQ/