html - 使嵌套列表项具有流动宽度

Question

我希望三级列表项具有可变宽度，因此它们的文本应该跨越一行，而不是像代码片段那样被截断为两行。

.menus {
	position: relative;
	margin-top: 15px;
}
.menus li {
	list-style: none;
}
.menus > nav > ul > li {
	display: inline-block;
}
.menus li a {
	padding: 10px 25px;
	text-transform: uppercase;
	font-size: 1.1em;
	color: #000000;
	text-align: left;

}
.menus > nav > ul > li > ul {
	display: none;
	position: fixed;
	padding: 10px;
	padding-top: 0;
	background: #ffffff;
	text-align: left;
}
.menus > nav > ul > li:hover > ul {
	display: block;
}
.menus > nav > ul > li > ul > li {
	display: block;
	position: relative;
	padding: 10px 0;
	margin-left: -10px;
}
.menus > nav > ul > li > ul > li > a {
	padding-right: 25px;
}
.menus > nav > ul > li > ul > li > ul {
	display: none;
	position: absolute;
	width: auto;
	padding: 10px;
	margin-left: 100%;
	margin-top: -30px;
	background: #ffffff;
	text-align: left;
}
.menus > nav > ul > li > ul > li:hover > ul {
	display: block;
}
.menus > nav > ul > li > ul > li > ul > li {
	display: inline-block;
	width: auto;
}
.menus > nav > ul > li > ul > li > ul > li a {
	display: block;
	width: auto;
}

<div class="menus">
  <nav>
    <ul>
      <li><a href="">Hover me</a>
        <ul>
          <li><a href="">Hover me too</a>
            <ul>
              <li><a href="">Make me fluid, please</a>
              <li><a >Make me fluid too</a></li>
              <li><a href="" >Coming Soon</a></li>
              <li><a href="">Bestsellers</a></li>
              <li><a href="" >Choose What you Pay</a></li>
            </ul>
          </li>
         </ul>
       </li>
     </ul>
   </nav>
 </div>

Answer 1

.menus > nav > ul > li > ul > li > ul > li {
    display: inline-block;
    width: auto;
    white-space: nowrap; // add this
}