CSS下拉菜单中的调整宽度

Question

我仅使用CSS制作了一个下拉菜单，但我做起来并不容易。 到目前为止，我有一个实际的下拉列表，但是宽度是父元素的宽度，对于某些项目而言，它太小了，无法在一行中显示。

菜单宽度太短

我尝试设置一个手动宽度，但这只是使整个内容无法对齐，并且不实用，因为菜单项可能会更长。 无论如何，在不更改父级宽度的情况下，其宽度可以适应内容吗？

所有站点文件都位于这里： http : //dev.cuonic.com/bourree/

任何帮助表示赞赏，谢谢:)

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样式仅适用于第一级菜单项。

这是有关在CSS选择器中使用>的基本参考。 我认为此示例中还有其他方面可以帮助您：