html - CSS 菜单：子菜单中的自动换行

Question

我有一个 CSS 下拉菜单，但我想不出一个问题。第一级之后的所有内容都有我不想要的奇怪的自动换行行为。它可能与positionanddisplay属性有关，但我无法弄清楚。

这是它目前的样子：

这就是我希望它看起来的样子：

给元素一个固定的修复这个问题，但我不想这样做。

我的菜单 CSS 代码如下所示：

.menuclass {
  background: grey;
  list-style: none;
  position: relative;
}

.menuclass li {
  float: left;
}

.menuclass li:hover > ul {
  display: block;
}

.menuclass ul {
  display: none;
  list-style: none;
  background: black;
  position: absolute;
  top: 100%;
}

.menuclass ul li {
  float: none;
  position: relative;
}

.menuclass ul ul {
  left: 100%;
  top: 0;
  position: absolute;
}

我能做些什么来解决这个问题？

我发现了一个类似的问题，建议使用它，white-space: nowrap;但不知何故，这对我来说似乎有点时髦。

小提琴

Answer 1

您需要做的就是添加white-space: nowrap;到您的.menuclass ul li选择器。

看看这个：http: //jsfiddle.net/hSVrc/1/