使用CSS构建下拉菜单

我正在构建将鼠标悬停在标题上时出现的下拉菜单。虽然我在w3schools上遵循了一些指令，但我的代码不起作用，我不知道为什么以及如何解决它。所有的答案是赞赏。这里是我的代码：使用CSS构建下拉菜单

.dropdown { 
 
    display: block; 
 
    position: relative; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    width: 100%; 
 
    position: absolute; 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 

 
    <div class="menu"> 
 
    <h2 class="dropdown">Menu</h2> 
 
    <div class="dropdown-content"> 
 
     <ul> 
 
     <li> 
 
      <a href="#">Content</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Content</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Content</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Content</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

来源

2016-12-10 Brother Eye

因为元素<div class="dropdown-content">...</div>是它的后代，所以您需要在包装上编写悬停样式，即<div class="menu">...</div>。

还给display: inline-block;用于打开下拉菜单的元素，这里是<h2 class="dropdown">Menu</h2>这样做会在光标停留在下拉菜单上时允许用户选择一个选项。

检查下面的代码片段。

.dropdown { 
 
    display: inline-block; 
 
    position: relative; 
 
    margin: 0; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
} 
 
.menu:hover .dropdown-content { 
 
    display: block; 
 
}

<div class="menu"> 
 
    <h2 class="dropdown">Menu</h2> 
 
    <div class="dropdown-content"> 
 
    <ul> 
 
     <li> 
 
     <a href="#">Content</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Content</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Content</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Content</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

来源

2016-12-10 11:02:07

啊哈...我明白了！非常感谢！ –

以及偷偷摸摸的错误有

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

.dropdown和.dropdown-content

他们是兄妹不父子

缩进你的HTML被欺骗

来源

2016-12-10 10:51:28

以及...编辑使其非常难以得到一个完美的压痕......至少对我来说...谢谢你，什么办法！ –

试试这个codepen ...

其实你在做什么错误是你必须表明你的悬停标题的兄弟你在做什么是.dropdown:hover .dropdown-content {display: block;}到样式应用到兄弟姐妹，我们必须使用+，比如.dropdown:hover + .dropdown-content {display: block;}。

希望你明白。

来源

2016-12-10 10:54:13

使用CSS构建下拉菜单

回答

相关问题