下拉菜单列表问题

我想让下拉菜单列表显示内联（水平），但最终垂直。如果我将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>

来源

2010-11-30 Bugsy