纯CSS实现Dropdown Menu遇问题求助：下拉框压文本+hover宽度异常

问题1：下拉菜单悬浮在文本上方 #

当前下拉菜单属于文档流内元素，展开时会占据空间并推动下方内容。解决核心是让下拉菜单脱离文档流：

• 给.navbar-items添加position: relative，作为下拉菜单的定位参考容器
• 给.dropdown-items设置position: absolute，搭配top: 100%和left: 0，让它刚好在导航项下方展开
• 移除nav.navbar:hover { align-items: self-start; }，该规则会导致导航栏整体上移，破坏原有布局

问题2：悬停时选项盒子拉伸 #

当前.dropdown-items的左右padding和flex布局的特性导致宽度异常，调整方式如下：

• 移除.dropdown-items的padding: 0 10px，避免额外宽度溢出
• 给所有可点击元素添加box-sizing: border-box，确保padding不会改变元素设定的宽度
• 将list-style-type: none移到.dropdown-items li的默认样式中，避免 hover 时才触发样式变化

修改后的完整CSS代码 #

html {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 3em;
  border: 1px solid gray;
  text-align: center;
  width: 50%;
  margin: 50px auto;
  padding: 20px 0;
}

p {
  font-size: 1.5em;
  border: 1px solid green;
  padding: 25px 50px;
  margin: 5px 25px;
}

span {
  display: inline-block;
  font: italic bold;
  color: red;
  padding: 15px;
  margin: 10px 25px;
  border: 1px solid green;
}

nav.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px 25px;
}

div.navbar-items {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  padding: 0 1px;
  position: relative;
}

.item,
a {
  display: inline-block;
  text-decoration: none;
  color: aliceblue;
  padding: 12px 0;
  width: 100%;
  background-color: rgb(58, 122, 196);
  text-align: center;
  box-sizing: border-box;
}

ul.dropdown-items {
  display: none;
  width: 100%;
  padding: 0;
  position: absolute;
  top: 100%;
  left: 0;
}

a.item {
  border-bottom: 1px solid rgb(85, 157, 238);
}

.dropdown-items li {
  border-bottom: 1px solid rgb(85, 157, 238);
  list-style-type: none;
}

div.navbar-items:hover ul.dropdown-items {
  display: flex;
  flex-direction: column;
  padding: 2px 0 0;
}

a:hover {
  background-color: rgb(87, 146, 214);
}

关键修改说明 #

1. 下拉菜单通过绝对定位脱离文档流后，不会再挤压下方的段落文本，实现悬浮效果
2. box-sizing: border-box确保所有元素的宽度计算包含内边距，避免悬停或展开时出现宽度拉伸
3. 调整下拉菜单的定位逻辑，让它始终对齐父导航项的宽度，保持布局一致性

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