Drop down menu list problems
I am trying to make the drop down menu lists display inline(horizontally) but end up vertically. If I set the ul_dropdown width to 600px or so, it'll do the result I want. However, I want it to do it without me setting the width. Here's my simplified html/css:
<style type="text/css">
#menu {
 list-style:none; 
}
#menu .item{
 display:inline;
 position:relati开发者_如何学Gove;
 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>
Use display:inline-block; and/or float:left; for your li's. Has to work!
Try looking over a few tutorials that tell you how to do this.
http://www.cssnewbie.com/horizontal-dropdown-menus/
 
         加载中,请稍侯......
 加载中,请稍侯......
      
精彩评论