为什么我的下拉导航栏不起作用？答案

【问题标题】：why my dropdown navigation bar doesn't work?为什么我的下拉导航栏不起作用？
【发布时间】：2020-12-07 12:55:00
【问题描述】：

我试图缩短 w3schools 的 css 教程 (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar) 上的导航栏代码。但是我的下拉菜单显示不正确。这是为什么呢？

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

a, span{
background-color: black;
color: white;
text-decoration:none;

}

.drop{
position: absolute;
z-index: 1;
display:none;

}

span:hover .drop{
display: block;


}

</style>
</head>
<body>

  <a href="#home">Home</a>
  <a href="#news">News</a>
    <span>Dropdown
      <a class="drop" href="#">Link 1</a>
      <a class="drop" href="#">Link 2</a>
      <a class="drop" href="#">Link 3</a>
    </span>
    
   

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

</body>
</html>

【问题讨论】：

标签： html css navigationbar

【解决方案1】：

我已将您的 .drop 类添加到包装器中，而不是在 a 标记本身上

我还提供了span position: relative，因此下拉菜单可以位于菜单项下方

body {
  font-family: Arial, Helvetica, sans-serif;
}

a, span{
background-color: black;
color: white;
text-decoration:none;
position: relative;
}

.drop{
position: absolute;
z-index: 1;
display:none;
flex-direction: column;
left: 0;
}

span:hover .drop{
display: flex;


}

<a href="#home">Home</a>
  <a href="#news">News</a>
    <span>Dropdown
      <div class="drop">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      </div>
    </span>
    
   

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

【讨论】：

谢谢，但为什么我们需要用 div 包裹锚点？为什么我的行不通？我很困惑
好吧，您制作了所有a 元素position:absolute，因此它们都具有相同的位置，彼此重叠。现在我只将absolute 添加到包装器中，以便内部的所有a 元素保持其默认位置。希望这是有道理的:)