html - CSS 菜单 : Word wrap in sub menus

Question

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

现在是这样的:

这就是我想要的样子:

给元素一个 fixed with 解决了这个问题，但我不想那样做。

我的菜单 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/