Question

我一直在尝试构建一个下拉菜单，但是当我将鼠标悬停在按钮上时无法显示下拉菜单。我在一个寻找故障的网站上检查了css，它说没有。我也跟着W3schools下拉css章几乎到了这封信，并且不能让它起作用。我已经调试了3天了。请帮忙。我已经编码了大约3个月。这是代码：

<!DOCTYPE html>
<html>

<head>
  <title>
    AGAIN3
  </title>
  <meta charset="UTF-8">
  <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    
    .dropdown {
      position: relative;
      display: inline-block;
    }
    
    .dropbtn {
      background-color: blue;
      color: white;
      font-family: arial;
      padding: 30px;
      border: none;
      cursor: pointer;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: purple;
      color: yellow;
      z-index: 1;
      min-width: 160px;
    }
    
    .dropdown-content a {
      color: white;
      background-color: pink;
      display: block;
    }
    /* Change color of dropdown links on hover */
    
    .dropdown-content a:hover {
      background-color: blue;
    }
    /* Show the dropdown menu on hover */
    
    .dropdown:hover.dropdown-content {
      display: block;
    }
    /* Change the background color of the dropdown button when the dropdown content is shown */
    
    .container:hover .button {
      background-color: black;
    }
  </style>
</head>

<body>

  <div class="dropdown">
    <button class="dropbtn">hover</button>
    <div class="dropdown-content">
      <a href="#">UEFA</a>
      <a href="#">FIFA</a>
      <a href="#">SFA</a>
    </div>
  </div>

</body>
</html>

Answer 1

CSS规则存在轻微的语法问题。

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

应改为

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

请注意.dropdown:hover和.dropdown-content之间的空格。

.dropdown-content是.dropdown容器的子元素，因此选择器应为.dropdown:hover .dropdown-content

Answer 2

你应该使用

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

而不是

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

这是代码笔。 https://codepen.io/SoumyaMahbub/pen/gRoyXL

当鼠标悬停在按钮上时，下拉菜单不起作用

2 个答案: