CSS下拉菜單自動寬度

Question

我有一個菜單，其中一些項目是非下拉菜單和其他菜單。

我遇到的問題是當下拉菜單中的一個出現時，它會推動所有相鄰的菜單項。然後，當下拉消失時，他們回到正常位置。

這是菜單的一個樣本：

<ul id="ulnav"> 
<li id="nav1" class="dropdown"> 
<a><i><img src="images/dandy-white/16/pencil.png" width="16"/></i>Payments In<i> 
<span class="mbullet"></span></i></a> 
    <ul class="dropdownmenu"> 
    <span class="droptop"></span> 
    <li><a href="Advanced">Advanced</a></li> 
    <li><a href="Account">Account</a></li> 
    </ul> 
</li> 

<li id="nav2" class="dropdown"> 
<a><i><img src="images/dandy-white/16/pencil.png" width="16"/></i>Payments Out<i> <span class="mbullet"></span></i></a> 
</li> 
</ul> 

和相關的CSS：

ul { 
list-style:none; 
padding:0; 
margin:0; 
} 

#ulnav li, #useroptions li { 
    float:left; 
    display:block; 
    height:42px; 
    width:110px; 
} 
#ulnav li a, #useroptions li a { 
    float:none; 
    padding:10px; 
    display:block; 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 
    opacity:0.9; 
} 

在上述情況下，如果我點擊「付款在」下拉會出現，推'支付'橫跨。

如何使頂層菜單項具有自動寬度，但當下拉菜單出現時沒有移動它們？

Answer 1

在下拉菜單容器上嘗試使用position:absolute;和z-index: ;。

例如..像...

#nav1 { 
position:absolute; 
z-index:9; 
} 

#nav2 { 
position:absolute; 
z-index:9; 
}