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/
精彩评论