How to create a dropdown-menu that is wider than its title?

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

Specifiy a larger width to the nested ul or li items such as:

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

This should make the nested ul larger than it's parent.

In terms of the full dropdown CSS there are plenty of solutions available to you. A good place to start would be www.cssplay.co.uk

Answer 2

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

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