悬停Products导航项时Dropdown-content不显示，求排查解决方法

核心问题分析 #

• HTML语法错误：<li>标签不能直接添加a href属性，必须嵌套独立的<a>标签作为子元素；dropdown-content列表是dropdown的兄弟元素，而非子元素，导致CSS的.dropdown:hover .dropdown-content子元素选择器无法匹配目标。
• 定位逻辑缺失：dropdown未设置position: relative，导致dropdown-content的绝对定位会相对于整个文档流，而非父级的Products选项。
• 选择器无效：原CSS中.dropdown-content a选择器对应不到HTML元素，因为下拉菜单的<li>里没有嵌套<a>标签。

修正后的代码 #

HTML部分

<nav>
  <ul class="nav_links">
    <li><a href="#">Home</a></li>
    <li class="dropdown" id="lol">
      <a href="#">Products</a>
      <ul class="dropdown-content">
        <li><a href="#">Health Care</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>
</nav>

CSS部分

/* 给父级dropdown设置相对定位，让下拉菜单基于它定位 */
.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    background-color: #fff;
}

.dropdown-content a{
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

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

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

/* 可选：给导航栏添加基础布局样式 */
.nav_links {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 20px;
}

.nav_links li {
    padding: 8px 0;
}

.nav_links a {
    text-decoration: none;
    color: #333;
}

修改说明 #

1. 修正所有<li>的结构，将a href属性改为嵌套<a>标签，符合HTML语法规范。
2. 将dropdown-content移入dropdown的<li>内部，使其成为子元素，确保CSS选择器能正确匹配。
3. 给.dropdown添加position: relative，让下拉菜单的绝对定位基于Products选项的位置。
4. 调整下拉菜单hover时的背景色为浅灰，避免黑色背景导致文字不可见。
5. 新增导航栏基础布局样式，让导航项横向排列，符合常规视觉效果。

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