css - 下拉菜单列表问题

Question

我正在尝试使下拉菜单列表显示为内联(水平)但最终垂直显示。如果我将 ul_dropdown 宽度设置为 600px 左右，它就会得到我想要的结果。但是，我希望它在不设置宽度的情况下完成。这是我简化的 html/css:

<style type="text/css">
#menu {
 list-style:none; 
}

#menu .item{
 display:inline;
 position:relative;
 float:left; 
 width:100px;
 height:20px;
 text-align:center;
}

#menu .item .ul_dropdown{
    position:absolute;
 float:left;
    left:-999em;
 list-style:none;
 margin:0px;
 padding:0px;
 border:2px solid red;

}

#menu .item .ul_dropdown li h3{
 margin:0px;
 padding:0px;
}

#menu .item .ul_dropdown li{
 display:inline;
 position:relative;
 float:left;
 list-style:none; 
 margin-right:1px;
}

#menu .item .ul_dropdown li ul{
 display:inline!important;
 position:relative;
 float:left;
 padding:0px;
 margin:0px;
 width:200px;
}

#menu .item .ul_dropdown li ul li{
 border:1px solid blue;
 width:200px;
 height:22px;
}

#menu .item:hover{
 background-color:red; 
}

#menu .item:hover .ul_dropdown {
 left:0px;
 top:auto;
}

#menu .item:hover .ul_dropdown li
{
 display:inline;
 width:200px;
}

</style>
<ul id="menu">
 <li class="item">Main
    <ul class="ul_dropdown">
     <li><h3>Sales</h3>
         <ul>
             <li>Sales Sample 1</li>
                <li>Sales Sample 2</li>
                <li>Sales Sample 3</li>
            </ul>
        </li>
     <li><h3>Invoice</h3>
         <ul>
             <li>Invoice Sample 1</li>
                <li>Invoice Sample 2</li>
            </ul>
     </li>
     <li><h3>Deal</h3>
         <ul>
             <li>Deal Sample 1</li>
                <li>Deal Sample 2</li>
                <li>Deal Sample 3</li>
            </ul>
     </li>        
    </ul>

    <li class="item">1st Menu
    </li>

    <li class="item">2nd Menu
    </li>

    <li class="item">3rd Menu
    </li>
</ul>

Answer 1

使用 display:inline-block; 和/或 float:left; 作为你的 li。 必须工作!