如何保持嵌套<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>

Answer 2

我建议的是给你隐藏的ul元素position: absolute把它从流程中取出。这将防止它弄乱父项的宽度，但会稍微"偏移"它。这可以用负margin-left来抵消。在这个例子中，我已经使用了margin-left: 45px，但你可能需要使用它。如果需要，您还可以使用top偏移下拉列表的高度。

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;
}
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;
position: absolute;
margin-left: -45px;
/* top: 90px; */
}

<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>