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

Answer 2

为嵌套的ul或li项指定更大的宽度，例如：

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

这应该使嵌套的ul大于它的父级。

就完整下拉CSS而言，您可以使用大量解决方案。一个好的起点是www.cssplay.co.uk

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

2 个答案: