CSS允许绝对元素扩展为比父级宽

Question

我的网站顶部导航栏上有一个下拉菜单。我希望此菜单中的项目水平扩展以适合其内容。由于某种原因，他们不会扩大到比他们的父母更广泛。

我在CodePen中重新创建了这个问题：http://codepen.io/YM_Industries/pen/GgJBQv

在我的实际网站中，我无法控制DOM的这一部分，因此我有点受限制。

以下是CodePen不可用时我的娱乐代码：

HTML：

<ul class="nav">
  <li>
    <a href="http://example.com">Home</a>
  </li>
  <li>
    <a href="http://example.com">v&nbsp;&nbsp;Test1&nbsp;&nbsp;v</a>
    <ul class="submenu">
      <li>
        <a href="http://example.com">Submenu 1</a>
      </li>
      <li>
        <a href="http://example.com">Long text wraps and is ugly :/ </a>
      </li>
    </ul>
  </li>
  <li>
    <a href="http://example.com">Test2</a>
  </li>
</ul>

CSS：

* {
  font-family: sans-serif;
}

ul.nav,
ul.nav li,
ul.nav ul {
  display: block;
  padding: 0;
}

ul.nav li {
  position: relative;
}

/* Style each link */
ul.nav li > a {
  display: block;
  padding: 10px 15px;
  line-height: 20px;
  height: 20px;
  background: rgba(254, 197, 46, 1);
  border: none;
}

/* Bring back the first level links */
ul.nav > li {
  float: left;
  margin-right: 1px;
}

/* Selected/Hover effect */
ul.nav li > a:hover {
  color: #004d85;
  background: rgb(255, 213, 102);
}

/* Display dropdown in the correct location */
ul.nav li ul.submenu {
  position: absolute;
  top: 40px !important;
  left: 0px !important;
  display: none;
}

ul.nav li:hover ul.submenu {
  display: block;
}

/* Set font+colour for site links */
ul.nav li a, 
ul.nav li a:link, 
ul.nav li a:visited {
  color: black;
  font-size: medium;
  text-decoration: none;
}

ul.nav li a:hover,
ul.nav li a:active {
  color: blue;
}

如果我在子菜单项（例如400px）上明确设置宽度，它们将正确扩展，但由于某种原因，内容不会使它们变得更宽。我真的不必硬编码宽度。

谢谢，

YM

Answer 1

解决方案相当容易。你只需要添加

ul.submenu a {
  white-space: nowrap;
}

可防止文本换行，因此不会粘贴到父容器大小。

您可以在此处查看http://codepen.io/anon/pen/QwbYvG

Answer 2

刚修好你的笔 - 升级你的css课程：

ul.nav li ul.submenu 
{
  position: absolute;
  top: 40px !important;
  left: 0px !important;
  width:auto;
  display: none;
  background: rgb(254, 197, 4);
}

ul.nav li ul.submenu > li
{
  display:inline-block;
  white-space: nowrap;
}

和它使用CSS 2：）