Question

I have a menu where some items are non-dropdowns and others are.

The problem I have is when one of the drop down menus appears, it pushes all the adjacent menu items across. They then return to their normal positions when the drop down disappears.

Here is a sample of the 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>

And the relevant 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;
}

In the above case if I click on ‘Payments In’ The drop down will appear and push ‘Payments Out’ across.

How do I make it so the top level menu items have an auto width, but not have them move when a drop down appears?

Answer 1

Try using position:absolute; and z-index: ; on your dropdown-menu containers.

For example.. something like…

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

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