Html 如何创建比标题更宽的下拉菜单？

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

<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解决方案。如果您想尝试，请指定嵌套ul或li项的更大宽度，例如：

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

这将使嵌套的ul比其父级更大

---

就完整的下拉CSS而言，有很多解决方案可供您使用。一个好的起点是将添加到您的下拉列表

。在您的JSFIDLE中，它将是以下内容：

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

---

你试过为ul li添加一个包含固定宽度的css类吗？@Brandon:试过了。它可以工作，但我不能用这种方式添加任何背景色。对我不起作用，因为我不知道菜单项的宽度。确保你也将

width:auto

添加到此位置。