悬停导航栏Drug Advocacy项时下拉菜单不显示的问题求助

问题分析 #

你的导航栏下拉菜单无法正常显示，核心问题出在HTML结构错误和CSS选择器逻辑错误，以下是具体问题和修复方案：

1. HTML结构错误 #

原代码中第一个<li>标签未正确闭合，导致Contact Us和Gallery的<li>被错误嵌套在第一个<li>内部，直接破坏了导航的层级结构。

修复后的HTML代码：

<body>
   <div class="navbar">
      <h1 class="logo">BE AWARE</h1>
      <ul>
         <li>
            <a href="#" class="dropdown">Drug Advocacy</a>
            <div class="dropdownda">
               <ul>
                  <li><a href="#">Drug Awareness</a></li>
                  <li><a href="#">Types of Drugs</a></li>
                  <li><a href="#">Abuse and Prevention</a></li>
               </ul>
            </div>
         </li> <!-- 补充缺失的闭合标签 -->
         <li><a href="">Contact Us</a></li>
         <li><a href="">Gallery</a></li>
      </ul>
   </div>
</body>

2. CSS选择器逻辑错误 #

原CSS中，你试图通过a.dropdown:hover选中它的子元素.dropdownda，但实际上.dropdownda是<a>的兄弟元素，并非子元素，导致选择器完全失效。另外，为了避免鼠标从<a>移到下拉菜单时菜单突然消失，建议将hover事件绑定在父级<li>上。

修复后的CSS代码：

body {
  font-family: sans-serif;
}

.navbar {
  background-color: darkgray;
  height: 80px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3%;
}

.navbar ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0; /* 清除默认内边距，避免布局偏移 */
}

.navbar ul li {
  padding: 10px 25px;
  position: relative;
}

.navbar ul li a {
  color: black;
  text-decoration: none;
  font-size: 22px;
}

.navbar ul li a.dropdown {
  font-weight: bold;
  text-decoration: underline;
}

.navbar ul li a:hover {
  color: purple;
}

/* 下拉菜单样式修复 */
.dropdownda {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: darkgray;
  padding: 0;
}

/* 将hover绑定到父li，确保鼠标移到下拉菜单时不消失 */
.navbar ul li:hover .dropdownda {
  display: block;
}

.navbar ul li .dropdownda ul {
  display: block;
  margin: 10px;
  text-align: center;
}

.navbar ul li .dropdownda ul li {
  width: 180px;
  padding: 10px;
}

关键修复点说明 #

• 修正HTML的<li>闭合问题，确保导航项层级正确
• 把hover事件从<a>标签转移到父级<li>，解决下拉菜单鼠标移开即消失的问题
• 使用正确的层级选择器(li:hover .dropdownda)，因为.dropdownda是<li>的子元素，而非<a>的子元素
• 清除列表默认的内外边距，优化布局一致性

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