html - 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

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

首先，将以下内容添加到下拉菜单中链接的 CSS:

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

我还必须将 #menu ul 和 #menu ul li 更改为 #menu > ul 和 #menu > ul > li，这样这些 CSS 样式将只应用于第一级菜单项。

这是关于在 CSS 选择器中使用 > 的基本引用。我认为此示例中还有其他地方会有所帮助:

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