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。必须工作！

Answer 2

尝试查看一些告诉您如何执行此操作的教程。

http://www.cssnewbie.com/horizontal-dropdown-menus/

下拉菜单列表问题

2 个答案: