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

Question

我正在制作一个只有 CSS 的下拉菜单，但我所做的并不容易。到目前为止，我有一个实际的下拉菜单，但宽度是父元素的宽度，对于某些项目来说太小而不能在一行中显示。

菜单宽度太短

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

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

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

score 0 · Accepted Answer

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

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

在此处输入图像描述

score 0 · Accepted Answer

这是一个不为下拉菜单使用固定宽度的解决方案。

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

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

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

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

2 回答 2