悬停状态下的CSS/HTML下拉菜单对我不起作用
我正在尝试用html和CSS制作一个下拉菜单。我遵循了一吨教程，但他们似乎对我不起作用，我不知道为什么。我有一个菜单栏，总是显示在屏幕的顶部，我想要另一个显示时，你悬停在左边的汉堡菜单。这是我当前的代码：
<body>
<div class='menudiv'>
<ul>
<li><a><img class='dropdown' src='burgermenu.png' alt='OpenMenu' height='90px' width="90px" onmouseover="this.src='burgermenuwit.png'" onmouseout="this.src='burgermenu.png'"></a></li>
<li style="float:right"><a href="#login"><img src='pp.png' alt='LogIn' height='90px' width="95px" onmouseover="this.src='ppwit.png'" onmouseout="this.src='pp.png'"></a></li>
</ul>
</div>
<div class='logo'>
<a href="#home"><img src='flowy_logo.png' alt='Logo' height='95px', widht='95px' onmouseover="this.src='flowy_logowit.png'" onmouseout="this.src='flowy_logo.png'">
</div>
<div class='menu2'>
<ul>
<li><a>Meten</a></li>
<li><a>Huidige waardes</a></li>
<li><a>Geschiedenis</a></li>
<li><a>Contact</a></li>
</ul>
</div>
</body>
</html>
和CSS：
.menudiv ul {
font-family: "Georgia", "Times New Roman", "Serif";
font-size: 25px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(102, 75, 255);
}
.menudiv ul li {
float: left;
cursor: pointer;
}
.menudiv ul li a {
display: block;
padding: 8px;
}
.logo img {
position: relative;
top: -105px;
margin-left: auto;
margin-right: auto;
display: block;
}
.menu2 ul {
position: relative;
list-style-type: none;
margin: 0;
padding: 0;
font-size: 30px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
top: -100px;
}
.menu2 ul li a {
display: block;
width: 200px;
background-color: rgb(102, 75, 255);
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
.menu2 ul li a:hover {
color: white;
cursor: pointer;
}
.menu2 {
display: none;
}
.dropdown:hover .menu2 {
display: block;
}
有谁能告诉我为什么它不起作用吗？
共有2个答案
这里有一个所有内容都已修复的JSFiddle:https://jsfidle.net/dwauq9ml/
我不得不改变一些东西为我自己的方便，因为我没有图像。
问题是：由于menu2不是要在其上显示悬停事件的元素的子元素，因此它将无法工作。
解决方案：您需要将menu2放在汉堡菜单的li中。您需要从burger映像中删除.Dropdown类，并将其添加到其父类LI中。
当你这样做的时候，一定会把布局搞乱。我写了一个JSFiddle为您（应该提到）与所有修复。
我建议您不要使用浮动，因为它们是不推荐的。我移除了浮子，并使用了flexbox，这是更好的和推荐的。我建议你去学Flexbox。我将在这个答案的末尾链接几个资源。
关于FlexBox的CSS技巧文章：https://css-tricks.com/snippets/CSS/a-guide-to-FlexBox/
学习FlexBox的趣味小游戏：https://flexboxfroggy.com/
使用相同的eventListener显示/隐藏“menu2”（在包含“li”的“burgerMenu”处）：
<li onmouseover="document.querySelector('.menu2').style.display = 'block';" onmouseout="document.querySelector('.menu2').style.display = 'none';">
顺便说一下，将js代码放入一个单独的文件（或至少是脚本标记）中，而不是将其与HTML混合使用，会更干净。
-
问题内容： 我试图做一个简单的CSS下拉菜单。当您将鼠标悬停在链接上时，我无法实现下拉子菜单。以下是我的HTML和CSS规则，谢谢。 问题答案： 尝试这个： 问题是您的菜单ul是可见的（始终），但是由于this规则的选择器，所以li里面的li是（始终）不可见。 请记住，visible：hidden隐藏元素，但仍在DOM中占用空间，而display：none隐藏元素并将其从页面元素流中移除 另外，您
-
问题内容： 好的，所以我需要的很简单。 我已经在导航栏中设置了一些下拉菜单（使用），并且工作正常。 问题是它可以工作“ ”，而我希望它可以工作“ ”。 有内置的方法吗？ 问题答案： 最简单的解决方案是使用CSS。添加类似…
-
问题内容： 我无法正常使用下拉菜单。我可以使导航栏完美显示，但是当我单击“ Dropdown”（二者之一）时，它不会显示下拉菜单。我曾尝试查看有关此问题的其他文章，但没有什么能解决每个人的问题。我直接从bootstrap网站复制了源代码，但似乎无法在我的机器上使用它。谁有想法？我盯着它看了一个小时，似乎无法弄清楚问题出在哪里。 问题答案： 也许尝试 看看是否行得通。
-
问题内容： 我正在尝试制作一个简单的CSS下拉菜单，当您将鼠标悬停在链接上时，将显示子菜单。当您将鼠标悬停在li上时，我已经设法实现了这一点，但无法弄清楚如何使用链接来实现。 我之所以尝试使用链接而不是li来执行此操作，是因为我的菜单宽度为100％，并且li所占的面积比链接大，因此，如果将鼠标悬停在该区域上，则不显示该子菜单不想。 我的CSS如下： 问题答案： 如果可能的话，我会避免使用JS。这不
-
.dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown:hover .dropbtn {
-
问题内容： 我复制了下拉菜单的官方Bootstrap 4示例，但它不起作用，没有任何内容被下拉。 问题答案： 编辑：万一其他人遇到这个问题，我相信OP的解决方案是他没有导入。 检查jQuery和所有相关的Bootstrap组件是否存在。还要检查控制台，并确保没有错误。