html - 如何创建比标题宽的下拉菜单？

Question

这是我的菜单的基本结构。我无法改变这一点。

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

如您所见，Panholder 比厨房宽。我怎样才能将 Kitchen 的宽度与其子菜单的宽度分开？ (子菜单允许重叠，我将隐藏除当前子菜单之外的所有子菜单。

我正在寻找非 JavaScript 解决方案。如果您想尝试一下，I've put it on jsFiddle .

Answer 1

添加position: absolute到您的下拉菜单 <ul> .在您的 jsFiddle 中，它将是以下内容:

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