html - 如何防止嵌套 <li> 扩展父 <li> 宽度？

Question

我的 CMS 通过像这样嵌套下拉菜单来处理它们:

body {
  text-align: center;
}

ul.nav {
  margin: 0;
  padding: 0;
  display: inline-block;
  list-style-type: none;
}

li.top-item {
  margin: 0;
  padding: 0;
  float: left;
  padding: .5em;
}

ul.dropdown-list {
  margin: 0 0 -8em;
  padding: 0;
  display: none;
  list-style-type: none;
  background: #eee;
  position: relative;
}

a.dropdown:hover+ul.dropdown-list {
  display: block;
}

<ul class="nav">
  <li class="top-item"><a href="#">home</a></li>
  <li class="top-item"><a href="#" class="dropdown">dropdown</a>
    <ul class="dropdown-list">
      <li class="dropdown-item">item 1</li>
      <li class="dropdown-item">item 2 expands parent :(</li>
      <li class="dropdown-item">item 3</li>
    </ul>
  </li>
  <li class="top-item"><a href="#">about</a></li>
</ul>

<p>Lorem ipsum and such...</p>

问题是，如果子链接的名称/标题比父链接长，将鼠标悬停在父链接上会使父链接扩展以适应最宽子链接的宽度。此链接中的示例:https://codepen.io/ivorytux/pen/PObemb

有什么好的方法可以让顶级菜单保持一致的宽度，而只有下拉菜单适合其链接的宽度？

Answer 1

您应该将顶部元素设置为相对位置:

li.top-item {
  position: relative;
  ...
}

和子菜单项到绝对位置:

ul.dropdown-list {
  position: absolute;
  ...
}

除此之外，您还可以设置:

ul.dropdown-list {
  position: absolute;
  white-space: nowrap; /* no wrapping */
  left: 50%; /* horizontal center */
  transform: translateX(-50%); /* horizontal center */
}

最后，您需要将悬停对象更新为:

li.top-item:hover ul.dropdown-list {
  display: block;
}

如问题中的示例所示，您无法选择子菜单。

完整代码片段:

body {
  text-align: center;
}

ul.nav {
  margin: 0;
  padding: 0;
  display: inline-block;
  list-style-type: none;
}

li.top-item {
  margin: 0;
  padding: 0;
  float: left;
  padding: 0.5em;
  position: relative;
}

ul.dropdown-list {
  margin: 0 0 -8em;
  padding: 0;
  display: none;
  list-style-type: none;
  background: #eee;
  position: absolute;
  white-space: nowrap;
  left: 50%;
  transform: translateX(-50%);
}

li.top-item:hover ul.dropdown-list {
  display: block;
}

<ul class="nav">
  <li class="top-item"><a href="#">home</a></li>
  <li class="top-item"><a href="#" class="dropdown">dropdown</a>
    <ul class="dropdown-list">
      <li class="dropdown-item">item 1</li>
      <li class="dropdown-item">item 2 this is a long item</li>
      <li class="dropdown-item">item 3</li>
    </ul>
  </li>
  <li class="top-item"><a href="#">about</a></li>
</ul>

<p>Lorem ipsum and such...</p>