如何使下拉导航菜单与父按钮宽度保持一致？

核心修改步骤 #

1. 给父元素设置相对定位
   给包含下拉菜单的li.link添加相对定位，让绝对定位的下拉菜单以它为参考容器，同时把原按钮的横向外边距移到父元素的内边距中，确保父元素宽度包含这个间距：

   li.link {
     position: relative;
     flex: 1;
     padding-inline: 5px;
   }
   

2. 调整下拉菜单的宽度与定位
   修改.drop的样式，让它完全继承父元素宽度，并紧贴父元素底部对齐：

   .drop {
     display: none;
     position: absolute;
     z-index: 1;
     box-shadow: var(--shadow);
     background-color: var(--dark-grey);
     color: var(--dark);
     border-radius: 0 0 15px 15px;
     width: 100%;
     left: 0;
     top: 100%;
   }
   

3. 调整按钮的宽度与盒模型
   移除按钮的横向外边距，让按钮充满父元素宽度，同时用box-sizing确保内边距不会撑大按钮尺寸：

   li.link > a {
     display: block;
     padding: 14px 16px;
     text-align: center;
     text-decoration: none;
     color: var(--dark);
     border: 2px solid var(--light-grey);
     border-radius: 8px;
     transition: 0.1s;
     width: 100%;
     box-sizing: border-box;
   }
   

额外优化建议 #

• 给下拉列表移除默认的内外边距和列表标记，避免多余空白：

  .drop ul {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  

• 确保CSS中使用的var(--light-grey)、var(--dark-grey)等自定义变量已提前定义，避免样式失效。

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