1. 首页
  2. 问题列表
  3. 悬停状态下的CSS/HTML下拉菜单对我不起作用
提问者：小点点

悬停状态下的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个答案

匿名用户

使用相同的eventListener显示/隐藏“menu2”（在包含“li”的“burgerMenu”处）：

<li onmouseover="document.querySelector('.menu2').style.display = 'block';" onmouseout="document.querySelector('.menu2').style.display = 'none';">

顺便说一下，将js代码放入一个单独的文件（或至少是脚本标记）中，而不是将其与HTML混合使用，会更干净。

匿名用户

这里有一个所有内容都已修复的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/

相关问题