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

Question

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

这就是当下的看法：

这就是我想要的样子：

将元素修复为修复此问题，但我不想这样做。

菜单的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;但不知何故这对我来说似乎有点时髦。

Fiddle

Answer 1

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

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