Question

Here’s the basic structure of my menu. I cannot change that.

<ul>
    <li><span>Bedroom</span></li>
    <li><span>Kitchen</span>
        <ul>
            <li><span>Pot</span></li>
            <li><span>Panholder</span></li>
        </ul>
    </li>
    <li><span>Garden</span></li>
</ul>

Here’s the layout I want to achieve:

Bedroom | Kitchen | Garden
        | Pot       |
        | Panholder |

As you can see Panholder is wider than kitchen. How can I disconnect the width of Kitchen from the width of it’s sub-menu? (Sub-menus are allowed to overlap, I’m going to hide all submenus but the current one.

I’m looking for a non-javascript solution. If you want to try it out, I’ve put it on jsFiddle.

Answer 1

Add position: absolute to your dropdown <ul>. In your jsFiddle, it would be the following:

body > ul > li > ul {
    position: absolute;
}