我希望我的下拉菜单有一个最大宽度，但我的CSS没有按预期工作

Question

我希望我的下拉菜单宽度不超过250px，文本要换行到下一行。我设置了最大宽度，但它们没有扩展。

http://jsfiddle.net/wtpvejjh/1/

<nav>
  <ul>
    <li><a href="#"></a>First
      <ul>
        <li><a href="#">I want this to wrap to the next line at 250px</a></li>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
      </ul>
    </li>
    <li><a href="#"></a>Second
      <ul>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
      </ul>
    </li>
    <li><a href="#"></a>Third
      <ul>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
      </ul>
    </li>
  </ul>
</nav>

Answer 1

限制特定LI（根据OP的原始问题）：

设置nav ul {width:250px}和clear浮动li＆＃39。然后他们会坐在彼此之下，只会像他们的内容一样宽，直到它们与父母一样宽（250px）并被迫包裹。

＆＃13;

＆＃13;

nav li {
  list-style: none;
  float:left;
  position: relative;
  padding: 10px;
  background: #eee;
}

nav li a {
  display:inline-block; /* Make these inline or inline block so their width is collapsed. */
}

nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
  width: 250px; /* Set width. This will 'contain' the children. */
}

nav li ul li {
   clear:both; /* Clear these so they stack. */
}
nav li ul li a {
  padding: 5px;
  color: red;
  text-decoration: none;
}

li:hover ul {
  display: block;
}

＆＃13;

<nav>
  <ul>
    <li><a href="#"></a>First
      <ul>
        <li><a href="#">I want this to wrap to the next line at 250px</a></li>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
      </ul>
    </li>
    <li><a href="#"></a>Second
      <ul>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
      </ul>
    </li>
    <li><a href="#"></a>Third
      <ul>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
      </ul>
    </li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

将儿童UL限制为最大宽度（根据OP的评论）：

感觉有点＆＃39; hacky＆＃39;你的里程可能会有所不同，但以下情况对我有用......

使用inline-block而不是float父li。将孩子ul设置为所需的最大width，并将孩子li显示为table-rows。这应该意味着＆＃39; table-row＆＃39; 将被内容折叠并保持打开状态，直到达到其父级边界 - 此时内容将换行

＆＃13;

＆＃13;

nav {
  font-size:0; /* set font size to avoid the natural margin that exists between inline-block elements */
}
nav li {
  font-size:16px; /* undo font size change to avoid the natural margin that exists between inline-block elements */
  list-style: none;
  display:inline-block; /* display inline (rather than float) */
  position: relative;
  background: #eee;
  padding: 10px;
}
nav li:hover {
  background: #ddd;
}
nav li a {
  display:block;
}
nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
  width:250px; /* fix at your desired max width */
}
nav li ul li {
  display:table-row; /* display like a table-row */
}
nav li ul li a {
  padding: 10px;
  color: red;
  text-decoration: none;
}
li:hover ul {
  display: block;
}

＆＃13;

<nav>
  <ul>
    <li><a href="#"></a>First
      <ul>
        <li><a href="#">I want this to wrap to the next line at 250px</a></li>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
      </ul>
    </li>
    <li><a href="#"></a>Second
      <ul>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
      </ul>
    </li>
    <li><a href="#"></a>Third
      <ul>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
        <li><a href="#">Something</a></li>
      </ul>
    </li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

更新（根据OP关于需要箱子阴影的评论）

假设您能够编辑HTML，您需要将子UL包装在一个额外的元素中。

请参阅：http://jsfiddle.net/wtpvejjh/49/

Answer 2

FIDDLE HERE http://jsfiddle.net/wtpvejjh/30/ 检查一下，我刚刚使用了你的代码并且解决方案很简单，实际上你需要给出nav li ul li而不是nav li ul的最大宽度。

注意 - 有时当你给出最大宽度并且如果一个单词占据的宽度大于该单词出来的宽度，那么使用word-wrap:break-word;它将打破这个词并调整宽度。

Answer 3

表示平滑的伪元素是答案

赋予nav ul固定宽度并清除浮动元素是正确的。

此外，使用:before和:after伪元素，您将为nav li ul li元素提供视觉宽度一致性，

check out the fiddle

Answer 4

简单，您只需将第二级li的width属性添加到css中，如下所示：

nav ul li ul li{  
  width: 250px;
}

结帐DEMO