导航栏右侧Dropdown Menu失效：下拉项不显示且Hover时出现蓝线

你的代码主要存在HTML结构混乱和CSS规则缺失/错误两个核心问题，我来一步步帮你修复：

第一步：重构HTML结构 #

原HTML的标签嵌套逻辑混乱（比如nav标签闭合位置错误、下拉菜单的层级关系不对），这会直接导致CSS无法正确作用。修正后的结构如下：

<nav class="navbar navbar-expand-md bg-dark navbar-dark py-3">
  <a id="name" href="index.html">
    <img src="images/headericon.png" width="40" height="40" class="d-inline-block align-top" alt="网站图标">
  </a>
  <h5 style="font-size: 22px" class="ml-2 text-info mt-2">webname</h5>
  
  <!-- 右侧下拉菜单容器 -->
  <div class="dropdown">
    <ul>
      <li>
        <a href="#">User12345</a>
        <!-- 子下拉菜单 -->
        <ul>
          <li><a href="#">Profile</a></li>
          <li><a href="#">Favourite</a></li>
          <li><a href="#">Sign Out</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

第二步：修正CSS样式问题 #

原CSS有几个关键错误，我会逐一修正并说明原因：

body {
  font-family: arial;
  margin: 0;
  padding: 0;
}

/* 导航栏使用flex布局，让左侧logo和右侧下拉菜单自动分栏 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dropdown {
  margin-right: 30px;
}

/* 主菜单基础样式 */
.dropdown > ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.dropdown > ul > li {
  position: relative;
  display: inline-block;
}

/* 统一设置所有导航链接的样式 */
.dropdown ul li a {
  display: block;
  padding: 0 15px;
  color: #D3D3D3;
  text-decoration: none; /* 去掉默认链接下划线 */
  line-height: 60px;
  font-size: 20px;
}

.dropdown ul li a:hover {
  background: #494c4e;
  text-decoration: none; /* hover时也保持无下划线 */
}

/* 核心：添加下拉菜单触发规则 */
.dropdown ul li:hover > ul {
  display: block;
}

/* 子下拉菜单样式 */
.dropdown ul ul {
  position: absolute;
  top: 100%; /* 精准定位在父菜单下方 */
  left: 0;
  display: none;
  padding: 0;
  margin: 0;
  background-color: #333; /* 和主导航背景统一，增强辨识度 */
  min-width: 150px;
}

.dropdown ul ul li {
  display: block; /* 子菜单改为纵向排列 */
}

.dropdown ul ul li a {
  line-height: 45px; /* 子菜单行高适当缩小 */
  padding: 0 20px;
}

关键修正点说明： #

1. 移除错误的transform: translateY(-110%)：这个属性把整个菜单向上偏移了110%，导致元素可能超出视口或被遮挡，直接删除即可。
2. 添加下拉触发规则：ul li:hover > ul { display: block; }是下拉菜单显示的核心，当鼠标悬停父列表项时，自动显示子菜单。
3. 彻底消除下划线：在链接的基础样式和hover样式中都设置text-decoration: none，避免浏览器默认的蓝色下划线。
4. 优化布局结构：用flex布局让导航栏左右元素自动对齐，修正混乱的嵌套层级，让CSS选择器能精准作用。

这样修改后，下拉菜单就能正常显示，hover时也不会出现蓝色下划线了。

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