如何避免嵌套<li>元素撑开父级<li>的宽度？

嘿，我来帮你搞定这个困扰！你现在遇到的问题根源在于下拉菜单用了position: relative——这个定位方式不会让元素脱离文档流，所以下拉菜单的内容依然会占据空间，自然就把父级<li>的宽度给撑大了。咱们可以用下面这两种简单的方法解决：

方法1：改用绝对定位（最推荐） #

把下拉菜单的定位改成position: absolute，让它完全脱离文档流，这样就不会影响父元素的尺寸了。不过要记得给父级.top-item加上position: relative，作为下拉菜单的定位参照点，不然下拉菜单会跑到页面的角落去。调整后的CSS如下：

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;
  position: relative; /* 新增：作为下拉菜单的定位容器 */
}

ul.dropdown-list {
  margin: 0;
  padding: 0;
  display: none;
  list-style-type: none;
  background: #eee;
  position: absolute; /* 改成绝对定位，脱离文档流 */
  top: 100%; /* 让下拉菜单刚好贴在父元素底部 */
  left: 0;
  white-space: nowrap; /* 可选：防止下拉选项换行变宽 */
}

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

方法2：用visibility+隐藏高度替代display:none #

如果你不想用绝对定位，也可以通过控制元素的可见性和高度来避免撑开父元素。这种方式下拉菜单依然在文档流里，但默认状态下高度为0且不可见，hover时再恢复：

ul.dropdown-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #eee;
  position: relative;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transition: all 0.3s ease; /* 可选：添加平滑过渡动画 */
}

a.dropdown:hover+ul.dropdown-list {
  visibility: visible;
  height: auto;
}

简单总结下：第一种方法是最常用的，因为绝对定位完全脱离文档流，不会对父元素和其他布局产生任何影响；第二种方法适合一些特殊场景，比如需要保留下拉菜单在文档流中的位置，但相对来说代码会复杂一点。

内容的提问来源于stack exchange，提问作者David