CSS下拉菜单中的自适应宽度

Question

我正在制作一个只有CSS的下拉菜单，而且我的方式并不简单。到目前为止，我有一个实际的下拉列表，但宽度是父元素的宽度，这对于某些项目显示在一行中来说太小了。

我尝试设置一个手动宽度，但这只是不对齐整个事情而且不实用，因为菜单项可能会更长。无论如何都有宽度适应内容，而不改变父宽度？

所有网站文件都位于此处：http://dev.cuonic.com/bourree/

• 索引页：http://dev.cuonic.com/bourree/index.html
• 样式表：http://dev.cuonic.com/bourree/css/style.css

感谢任何帮助，谢谢：）

Answer 1

在firefox / firebug中玩耍我发现这个组合似乎产生了预期的效果：

#menu ul ul li {
    display: block;
    float: left;
    left: -34px;
    position: relative;
    width: 200px;
}

Answer 2

这是一个不使用固定宽度的下拉列表的解决方案。

首先，将以下内容添加到CSS中以获取下拉列表中的链接：

#menu ul ul li a {
    white-space: nowrap;
}

我还必须分别将#menu ul和#menu ul li更改为#menu > ul和#menu > ul > li，以便这些CSS样式仅适用于第一级菜单项。< / p>

这是关于在CSS选择器中使用>的基本参考。我认为在这个例子中还有其他一些有用的地方：

http://reference.sitepoint.com/css/childselector