Question

我正在处理带有垂直子菜单的水平菜单。我的大多数显示功能都按照我想要的方式设置，但是我在显示具有相同宽度的子菜单项时遇到了麻烦。我希望将它们显示为一个漂亮的偶数块，但是我在子菜单的右侧留下了锯齿状的边缘。

这是我用于菜单本身的html片段。

<nav class="navbar">
  <ul>
    <li><a href="#" >Home</a></li>
    <li><a href="#" >item with sub</a>
    <ul>
      <li><a href="#" >sub item 1</a></li>
      <li><a href="#" >sub item 2 which is longer</a></li>
      <li><a href="#" >sub item 3</a></li>
    </ul>

我不确定我正在使用的css的哪个部分可能会影响下拉菜单的宽度，所以这就是一切。

.navbar {
  font-size: 20px;
  text-align: center;
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

.navbar a {
  background-color: #333;
  color: #999;
  text-decoration: none;
}

.navbar ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.navbar li {
  float: left;
  position: relative;
  min-width: 120px;
  padding: 10px 10px 10px 10px;
  background-color: #333;
  color: #999;
}

.navbar li ul {
  display: none;
  position: absolute;
  left: 0;
}

.navbar li > ul {
  top: 42px;
  left: 0px;
}

.navbar li:hover,
.navbar li:hover > a,
.navbar li a:hover{
  background-color: #999;
  color: #333;
  text-decoration: none;
  display: block;
}

.navbar li:hover ul,
.navbar li:hover ul li {
  display: block;
  clear: both;
  min-width: 120px;
}

小提琴在这里：http://jsfiddle.net/jasotastic/yso6v2po/

可能这是重复的，但我未能找到类似的问题。

Answer 1

您可以将宽度设置为li并使用white-space：normal。那么你将有一个固定的宽度，如果它大于宽度，就会破坏它。

您的代码已修改：

.navbar li ul li {
  width:200px;
  white-space:normal;
  display: block;
}

这是jsfiddle：http://jsfiddle.net/yso6v2po/3/

Answer 2

您可以将100％宽度设置为<li>以根据内容宽度进行调整。

.navbar li ul li {
  display: block;
  width: 100%;
  text-align: left;
}

小提琴：http://jsfiddle.net/yso6v2po/4/

css列表项显示统一宽度

2 个答案: