为什么

（具有绝对位置）不能在
• （具有相对位置）自动调整大小？

编辑：另请参阅下面我自己的答案（2016）

例如：

<ul>
    <li class="first"><a href="#" title="">Home</a></li>
    <li><a href="#" title="">Chi siamo</a>
       <ul><li><a href="#" title="">item1</a></li><li><a href="#" title="">item2</a></li></ul>
    </li>
    <li><a href="#" title="">Novità</a></li>
    <li><a href="#" title="">Promozioni</a></li>
</ul>

然后设计风格：

/* level 1 Main menu ----------------------------------------- */

#main-menu > ul{ list-style:none; }

#main-menu > ul > li{
    float:left;
    display:block;
    position:relative;
    margin-left:1em;
}

#main-menu > ul > li.first{
    margin-left:0;
}


/* sub Main menu ----------------------------------------- */

#main-menu > ul > li ul {
    position: absolute;
    z-index:1000;
    display:none;
    left:0;
    top:28px;
}

#main-menu > ul > li:hover ul {
    display:inline-block;
}

#main-menu > ul > li ul li{
    float:left;
    display:block;
    list-style:none;
}

好的。所以，我得到了水平显示的主菜单。我还希望子菜单显示水平。但由于某种原因， ul 框不会调整大小以达到 li 标签的总宽度，因此它保持垂直。父 ul 不会遇到这个问题。 我可以通过简单地为子 ul 添加适当的宽度来使其工作，但这不是我想要使用的方式。

任何想法？

重要的是拥有:hover如果使用绝对位置则两次； 1 号于li，这会触发display: block，然后在ul显示在触发器上。
然后将定位和样式分开：我设计了a而不是li

看这里：http://jsfiddle.net/HerrSerker/T8x2r/2/ http://jsfiddle.net/HerrSerker/T8x2r/2/

#main-menu > ul > li > ul:hover,
#main-menu > ul > li:hover > ul {
    display: block;
}

应该与float:left also http://jsfiddle.net/T8x2r/3/ http://jsfiddle.net/T8x2r/3/