如何创建一个比标题宽的下拉菜单?

这是我菜单的基本结构。我不能改变。

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

下面是我想要实现的布局:

Bedroom | Kitchen | Garden
        | Pot       |
        | Panholder |

正如你所看到的 潘霍尔德 比厨房宽。我怎样才能断开 厨房 从它的子菜单的宽度?(子菜单允许重叠,我将隐藏除当前子菜单之外的所有子菜单。

我正在寻找一个非javascript的解决方案。如果你想试试看, I've put it on jsFiddle .