导航栏与下拉菜单对齐及hover样式修复技术求助

我来帮你修复这两个导航栏的问题，先看修改后的完整代码，再逐一解释关键改动：

修改后的CSS代码 #

/* 全局统一盒模型，避免宽度计算混乱 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.navigation {
  /* 移除overflow:hidden，避免下拉菜单被截断 */
  /* overflow: hidden; */
  height: 60px;
  border: 3px solid #E3E3E3;
  background-color: #1f1d1d;
  font-family: Arial, Helvetica, sans-serif;
  width: 1078px;
  /* 用flex布局让导航项自动分配空间，解决hover宽度问题 */
  display: flex;
}

.navigation a {
  /* 移除float和固定width，改用flex自动分配 */
  /* float: left; */
  /* width: 234px; */
  flex: auto;
  font-size: 30px;
  color: antiquewhite;
  text-align: center;
  padding: 18px 20px;
  text-decoration: none;
  height: 100%; /* 让高度填满导航栏，hover背景覆盖全高 */
}

.dropdown {
  /* 设置相对定位，让下拉菜单以它为基准定位 */
  position: relative;
  flex: auto; /* 和其他导航项均分空间 */
}

.dropdown .dropbtn {
  border: none;
  font-size: 30px;
  margin: 0;
  outline: none;
  color: antiquewhite;
  padding: 18px 20px;
  background-color: inherit;
  font-family: inherit;
  width: 100%; /* 按钮宽度填满容器 */
  height: 100%; /* 高度填满导航栏 */
  cursor: pointer;
}

.navigation a:hover, .dropdown:hover .dropbtn {
  background-color: #4e3f3f;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%; /* 下拉菜单紧贴父元素底部，不覆盖 */
  left: 0; /* 和父元素左侧对齐 */
  background-color: #1f1d1d;
  width: 100%; /* 下拉菜单宽度和父元素一致 */
  box-shadow: 0px 8px 16px 0px rgb(186,179,179);
  z-index: 1;
}

.dropdown-content a {
  color: antiquewhite;
  padding: 18px 20px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.dropdown-content a:hover {
  background-color: #4e3f3f;
}

.dropdown:hover .dropdown-content {
  display: block;
}

修改后的HTML代码 #

<div class="navigation">
  <a href="#home">Home</a>
  <div class="dropdown">
    <button class="dropbtn">Types <i class="fa fa-caret-down"></i></button>
    <div class="dropdown-content">
      <a href="#">Regular</a>
      <a href="#">Cafe latte</a>
      <a href="#">Espresso</a>
      <a href="#">Cappuccino</a>
    </div>
  </div>
  <a href="#shop">Shop</a>
  <a href="#about">About</a>
</div>

关键改动说明 #

1. 解决下拉菜单覆盖父元素+对齐问题

• 移除.navigation的overflow: hidden：原来这个属性会截断超出导航栏高度的下拉菜单，现在移除后下拉菜单能正常展开。
• 给.dropdown添加position: relative：让绝对定位的下拉菜单以它为基准，避免相对于整个页面偏移。
• 设置.dropdown-content的top: 100%和left: 0：让下拉菜单紧贴父元素底部，且和父元素左侧完全对齐，不会覆盖父元素。
• 把.dropdown-content宽度设为100%：让下拉菜单宽度和父元素完全一致，视觉上更协调。

2. 解决About标签hover无法填满宽度的问题

• 全局添加box-sizing: border-box：让元素宽度包含padding和border，避免手动计算宽度的麻烦。
• 将.navigation改为display: flex：用flex布局替代float，让所有导航项自动均匀分配导航栏宽度，不用手动设置固定width。
• 给.navigation a和.dropdown添加flex: auto：让每个导航项（包括下拉按钮容器）均分导航栏空间。
• 把.dropbtn和.navigation a的高度设为100%：让元素高度填满导航栏，hover时背景覆盖整个区域。

这样修改后，下拉菜单会紧贴父元素下方对齐，不会覆盖；所有导航标签hover时背景都会填满整个项的宽度和高度，视觉效果更统一。

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