Html CSS下拉菜单自动宽度

我有一个菜单，其中一些项目是非下拉菜单，其他项目是

我遇到的问题是，当一个下拉菜单出现时，它会将所有相邻的菜单项推到另一个菜单项上。当下降消失时，它们会返回到正常位置

以下是菜单示例：

<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>

在上述情况下，如果我单击“付款入”下拉列表，将显示“付款出”

---

如何使顶层菜单项具有自动宽度，但在出现下拉菜单时不会移动？

尝试使用

位置：绝对和
z-索引：在下拉菜单容器上

例如。。类似于

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

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

嗯……斜体图像是什么样子的？：）您是否尝试过给出您的
.dropdown菜单
位置：绝对
？不允许将SPAN.droptop放在那里。。。（在李和UL之间）谢谢安娜，我本来应该试试的@丹尼，我会试着把它移到里边去！
#nav1 {
position:absolute;
z-index:9;
}

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