Border-Bottom与下拉菜单冲突导致菜单无法显示问题求助

你的下拉菜单无法显示核心不是border-bottom伪元素的问题，而是两个关键问题：HTML结构错误，以及下拉菜单缺少必要的定位样式。

1. 修复HTML结构错误 #

当前你的.dropdown和Products的<li>是同级关系，但CSS里写的是.navbar ul li:hover .dropdown——这个选择器是在找li的子元素dropdown，所以必须把dropdown放到Products的li内部：

<header>
  <div class="banner">
    <div class="navbar">
      <img src="icon.png" class="logo">
      <ul>
        <li><a href="#">Home</a></li>
        <!-- 将下拉菜单嵌套进Products的li中 -->
        <li>
          <a href="#">Products</a>
          <ul class="dropdown">
            <li><a href="#">Healthcare</a></li>
            <li><a href="#">Cosmetic</a></li>
            <li><a href="#">Misc.</a></li>
          </ul>
        </li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Register</a></li>
      </ul>
      <button type="button">Login</button>
    </div>
  </div>
</header>

2. 完善下拉菜单的CSS样式 #

即使修复了结构，当前的dropdown显示后也会破坏布局，需要添加定位和基础样式：

* {
  margin: 0;
  padding: 0;
  background-color: white;
  /* 移除全局overflow-x:hidden，它会限制下拉菜单的显示范围 */
  /* overflow-x: hidden; */
}

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

header {
  background-color: rgb(255, 255, 255);
  height: 600px;
}

.navbar {
  width: 85%;
  margin: auto;
  padding: 60px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  width: 160px;
  cursor: pointer;
  margin-right: auto;
}

.navbar .dropdown {
  display: none;
  /* 绝对定位让下拉菜单悬浮，不影响导航栏布局 */
  position: absolute;
  top: 100%;
  left: 0;
  /* 添加背景和边框，区分内容 */
  background: white;
  border: 1px solid #eee;
  border-top: none;
  list-style: none;
  /* 设置固定宽度，避免内容换行 */
  width: 150px;
}

/* 下拉菜单的li改为块级元素，取消inline-block */
.navbar .dropdown li {
  display: block;
  margin: 0;
  padding: 10px;
}

.navbar ul li:hover .dropdown {
  display: block;
}

.navbar ul li {
  list-style: none;
  display: inline-block;
  margin: 0 20px;
  position: relative;
  /* 添加底部内边距，避免下划线伪元素和下拉菜单重叠 */
  padding-bottom: 8px;
}

.navbar ul li a {
  text-decoration: none;
  color: black;
}

.navbar ul li::after {
  content: '';
  height: 3px;
  width: 0;
  background: teal;
  position: absolute;
  left: 0;
  bottom: 0px;
  transition: 0.5s;
}

.navbar ul li:hover::after {
  width: 100%;
}

button {
  list-style: none;
  border: none;
  background: teal;
  padding: 10px 20px;
  border-radius: 30px;
  color: white;
  font-size: 15px;
  transition: 0.4s;
  cursor: pointer;
}

关键修复点说明 #

• 结构修正：下拉菜单必须作为触发它的li的子元素，这样:hover才能正确关联显示逻辑。
• 移除全局overflow-x:hidden：全局设置该属性会截断下拉菜单的显示范围，导致内容无法正常展示。
• 下拉菜单定位：用绝对定位让下拉菜单悬浮在父元素下方，避免撑开导航栏的横向布局。
• 父li的padding-bottom：避免hover时的下划线伪元素和下拉菜单顶部重叠，提升视觉体验。

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