Question

我有垂直下拉菜单，我希望子菜单也是垂直的。看起来，如果你为子菜单float:left设置li它应该没问题，但问题是，ul嵌套的子菜单li有宽度这取决于它的父级（li）宽度，并且不能扩展，以便子菜单的行（li）垂直显示。
您可以看到一个示例：http://jsfiddle.net/r6qNJ/

我想到了两个解决方案：

解决方案1：
将嵌套ul的宽度扩展为非常大的

 ul.sub{width:999px;}

问题是，通过这种方式，我不得不放弃子菜单ul的背景和边框，因为它具有非自然宽度。
例如：http://jsfiddle.net/r6qNJ/1/

解决方案2
使用display:flex属性，以便子元素的宽度不依赖于它的父宽度。一个例子：http://jsfiddle.net/r6qNJ/2/
问题是，旧浏览器不支持。

那么，您可以提供哪种更优雅高效的CSS解决方案？（我正在寻找一个纯CSS解决方案，而不是改变HTML，因为我正在谈论改变wordpress主题并且更喜欢只在css文件中进行更改）

Answer 1

您可以在white-space中使用此选项：

ul.sub{  
  position:absolute;
  left:0px;
  top:100%;
  padding:0;
  display:inline-block;
  white-space:nowrap;
}
ul.sub li{
  display:inline-block;
  margin-right:-4px;
  width:80px;
  float:none;
}

演示 http://jsfiddle.net/r6qNJ/23/

如何使后代宽度不依赖于它的父宽度

1 个答案: