如何删除始终显示的下拉菜单？

Question

我仍然是一个新手，我使用 html 和 css 为网站创建了一个导航栏，服务选项卡有一个下拉列表，但即使显示设置为无，该列表也会保持显示。谁能帮我解决这个问题。我现在已经尝试了很多方法，但似乎无法解决问题。我添加了我使用的代码：

<!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 ul {
      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>
      <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>

我在 youtube 上观看了一些视频并尝试了一些现有代码，但每次我用自己的导航栏尝试时，都会出现问题。

Answer 1

.navbar ul

的样式针对的是您要隐藏的

.dropdown

元素，并且设置了

display: flex

。

.navbar ul

具有更高的特异性，因此它会覆盖

.dropdown

的样式。

要解决此问题，您可以将样式选择器从

.navbar ul

更改为

.navbar > ul

。通过添加

，您是在说“选择直接

位于

ul 元素内的 .navbar

 元素”，而不是选择与

ul

 匹配的任何嵌套子级。

<!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 > ul {
      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>
      <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>

如何删除始终显示的下拉菜单？

问题描述投票：0回答：1

1个回答

最新问题

如何删除始终显示的下拉菜单？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1