How to create a drop-down menu that is wider than its name?

Question

Here is the basic structure of my menu. I can’t 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 is the layout I want to achieve:

Bedroom | Kitchen | Garden
        | Pot |
        | Panholder |

As you can see, Panholder is wider than the kitchen. How to disable the width of the kitchen by the width of the submenu? (The submenu is allowed to overlap, I'm going to hide all the submenus, but the current one.

I am looking for a solution other than javascript. If you want to try, I put it on jsFiddle .

Answer 1

Add position: absoluteto the drop down list <ul>. In jsFiddle, this will be the following:

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

Answer 2

ul li, :

ul { width: 100px; }
ul li ul { width: 200px; }

ul , .

CSS . www.cssplay.co.uk