防止嵌套导航项目突破到下一行？

Question

我有一个基本的水平导航菜单，其中有一个下拉列表显示悬停。当下拉链接是单个单词时，一切正常，但如果链接不止一个单词，即“Lori Ipsum”，则换行。我正在寻找保持其全宽的线条，因此“Lori Ipsum”将显示在同一条线上。

如何防止换行？

在代码笔中重新创建：http://codepen.io/agconti/pen/zvjkm

HTML：

<nav role='navigation'>
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">About</a>
      <ul>
        <li>Lorem ipsum</li>
        <li>Aliquam tincidunt</li>
        <li>Vestibulum auctor</li>
      </ul>  
    </li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav> 

的CSS：

html {
  font-size: 1.5em;
}

a {
  color: white;
  text-decoration: none;
  width: 100%;
}

li {
  transition: color 0.15s ease-out,  background-color 0.1s ease-in;
}

ul {
  list-style: none;
  background: blue;
  margin: 0;
}
ul li {
  padding: 1em;
  margin: 0;
  display: inline-block;
  position: relative;
}
ul li:hover {
  background: pink;
}
ul li:hover > ul {
  display: block;
}
ul ul {
  background-color: pink;
  position: absolute;
  display: none;
  padding: 0;
  left: 0;
  top: 100%;
}
ul ul li {
  box-sizing: border-box;
  display: block;
  minwidth: 100%;
}
ul ul li:hover {
  background: #ffa6b6;
  color: white;
}

Answer 1

设置li默认宽度;

或使用

li a {
    white-space: nowrap;
}

Answer 2

也许我错过了什么，但你有一个非常好的解决方案，你可以 通过指定嵌套ul的宽度来修复文本换行问题，如下所示：

ul ul {
  background-color: tan;
  position: absolute;
  display: none;
  padding: 0;
  left: 0;
  top: 100%;
  width: 300px;
}

我使用300px但您可以选择合适的值。

html {
  font-size: 1.5em;
}

a {
  color: white;
  text-decoration: none;
}

li {
  transition: color 0.15s ease-out,  background-color 0.1s ease-in;
}

ul {
  list-style: none;
  background: blue;
  margin: 0;
}
ul li {
  padding: 1em;
  margin: 0;
  display: inline-block;
  position: relative;
}
ul li:hover {
  background: pink;
}
ul li:hover > ul {
  display: block;
}
ul ul {
  background-color: tan;
  position: absolute;
  display: none;
  padding: 0;
  left: 0;
  top: 100%;
  width: 300px;
}
ul ul li {
  /*      white-space: nowrap;*/
  box-sizing: border-box;
  display: block;
  min-width: 100%;
}
ul ul li:hover {
  background: #ffa6b6;
  color: white;
}
ul ul li a {
  width: 200%;
}

<nav role='navigation'>
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">About</a>
      <ul>
        <li><a href="">Lorem ipsum</a></li>
        <li>Aliquam tincidunt</li>
        <li>Vestibulum auctor</li>
      </ul>  
    </li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>  
<section class="hero">
  <div class="mask"></div>
</section>

Answer 3

li a {
    white-space: nowrap;
}