如何解决HTML/CSS导航栏下拉菜单始终显示的问题？

你的下拉菜单始终显示的核心原因是CSS选择器权重冲突：
你给.navbar ul设置了display: flex，而.dropdown本身就是.navbar下的ul元素，.navbar ul的选择器权重比单独的.dropdown更高，直接覆盖了display: none的设置，导致下拉菜单一直可见。

两种修复方案 #

方案1：提升下拉菜单选择器权重 #

把.dropdown的CSS选择器改成.navbar .dropdown，让它的权重超过.navbar ul，这样display: none就能生效：

/* 修改前 */
.dropdown {
  display: none;
  /* 其他样式... */
}

/* 修改后 */
.navbar .dropdown {
  display: none;
  /* 其他样式保持不变 */
}

方案2：给顶层导航列表单独加类（结构更清晰） #

给顶层的ul添加一个类名（比如nav-links），只给这个类设置flex布局，避免影响下拉菜单的ul：

HTML修改：

<nav class="navbar">
  <!-- 给顶层ul添加nav-links类 -->
  <ul class="nav-links">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li>
      <a href="#services">Services</a>
      <ul class="dropdown">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </li>
    <li><a href="#articles">Articles</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

CSS修改：

/* 修改前 */
.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex: 1;
  justify-content: space-evenly;
  align-items: center;
}

/* 修改后 */
.navbar .nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex: 1;
  justify-content: space-evenly;
  align-items: center;
}

修复后的完整代码（方案2示例） #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navigation Bar with Dropdown</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }
    
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(to right, #6a1b9a, #2e7d32);
      padding: 10px 20px;
      border-radius: 30px;
    }
    
    .navbar .nav-links {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex: 1;
      justify-content: space-evenly;
      align-items: center;
    }
    
    .navbar li {
      position: relative;
    }
    
    .navbar a {
      text-decoration: none;
      color: #fff;
      font-size: 16px;
      font-weight: bold;
      transition: color 0.3s ease;
    }
    
    .navbar a:hover {
      color: #d1c4e9;
    }
    /* Dropdown Menu */
    
    .dropdown {
      display: none;
      /* Hidden by default */
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #6a1b9a;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      width: max-content;
    }
    
    .dropdown li {
      margin: 0;
    }
    
    .dropdown a {
      display: block;
      padding: 10px 20px;
      white-space: nowrap;
      color: #fff;
      font-weight: normal;
      text-align: left;
    }
    
    .dropdown a:hover {
      background-color: #4a148c;
    }
    
    .navbar li:hover>.dropdown {
      display: block;
    }
  </style>
</head>

<body>
  <nav class="navbar">
    <ul class="nav-links">
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li>
        <a href="#services">Services</a>
        <!-- Dropdown Menu -->
        <ul class="dropdown">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
        </ul>
      </li>
      <li><a href="#articles">Articles</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</body>

</html>

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