メニューリストの問題をドロップダウン

私は、ドロップダウンメニューリストをインライン（水平）に表示しますが、垂直に終了しようとしています。 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