如何使后代宽度不取决于它的父宽度

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/