2

一部のアイテムが非ドロップダウンであり、他のアイテムがドロップダウンでないメニューがあります。

私が抱えている問題は、ドロップダウン メニューの 1 つが表示されると、隣接するすべてのメニュー項目が押し出されることです。ドロップダウンが消えると、通常の位置に戻ります。

メニューのサンプルは次のとおりです。

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

上記の場合、[Payments In] をクリックすると、ドロップダウンが表示され、[Payments Out] が押し出されます。

最上位のメニュー項目に自動幅を持たせ、ドロップダウンが表示されたときに動かないようにするにはどうすればよいですか?

4

1 に答える 1

3

ドロップダウン メニュー コンテナーでposition:absolute;とを使用してみてください。z-index: ;

たとえば..何か...

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

#nav2 {
position:absolute;
z-index:9;
}
于 2012-09-18T19:18:02.340 に答える