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;} 规则。我已经 fork 了你的 jsfiddle 并应用了它，将鼠标悬停在 .menuheads 上以查看 .menubodys。网址在这里:http://jsfiddle.net/goktugkayaalp/3usYQ/