CSS下拉菜单自动宽度

时间:2012-09-18 19:08:42

标签: html css drop-down-menu

我有一个菜单,其中一些项目是非下拉列表而其他项目是。

我遇到的问题是当其中一个下拉菜单出现时,它会推送所有相邻的菜单项。当下拉消失时,它们会返回正常位置。

以下是菜单示例:

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

在上述情况下,如果我点击“付款时间”,则会显示下拉菜单,并将“付款结算”推送到其中。

如何制作,以便顶级菜单项具有自动宽度,但在下拉菜单时不会移动它们?

1 个答案:

答案 0 :(得分:3)

尝试在下拉菜单容器中使用position:absolute;z-index: ;

例如...类似......

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

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