为什么我的下拉菜单卡住了？ html答案

【问题标题】：why is my dropdown menu stuck? html为什么我的下拉菜单卡住了？ html
【发布时间】：2018-02-07 21:52:11
【问题描述】：

这是html代码。我使用图像作为下拉菜单，而不是按钮或文本。

/* Dropdown Button / .dropbtn { background-image: url(Images/Buttons/Resources3.png); width: 110px; height: 40px; } / The container <div> - needed to position the dropdown content*/

.dropdown {
  position: relative;
  display: inline-block;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 110px;
  z-index: 1;
  color: black;
  padding: 0px;
  text-decoration: none;
  display: block;
}


/* Show the dropdown menu on hover */

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

.dropdown:hover .dropbtn {
  background-image: url(Images/Buttons/Resources3R.png);
}

<div class="dropdown">
  <img class="dropbtn">
  <div class="dropdown-content">
    <img src="../Images/Buttons/Aboutus1.png" width="110px" height="40px">
    <img src="../Images/Buttons/Aboutus2.png" width="110px" height="40px">
    <img src="../Images/Buttons/Aboutus3.png" width="110px" height="40px">
  </div>
</div>

【问题讨论】：

我为您点击了编辑器中的<> 按钮并将css 粘贴到相关面板中。请删除您的 cmets，切勿使用 cmets 进行代码更新
可以从placeholder.com获取图片
卡住是什么意思？你的代码实际上并没有做任何事情，只是显示一堆不存在的图像......
图像保存在我的文件夹中。当鼠标悬停在下拉菜单上时，下拉菜单不会出现，下拉菜单会一直存在。请你告诉我如何创建正确的代码，使用图像而不是按钮。

标签： javascript jquery html css drop-down-menu

【解决方案1】：

您的代码中有一些错误。一方面，您试图将鼠标悬停在包含菜单的未关闭 div 上。另一方面，您在初始 css 上设置了“显示：块”！这有效：

.dropbtn { background-image: url(http://via.placeholder.com/350x150); width: 110px; height: 40px; } 

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 110px;
  z-index: 1;
  color: black;
  padding: 0px;
  text-decoration: none;
}

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

.dropdown:hover .dropbtn {
  background-image: url("http://via.placeholder.com/350x150");
}

<div class="dropdown">
  <div id="button">
	<img class="dropbtn">
  </div>
  <div class="dropdown-content">
    <img src="http://via.placeholder.com/350x150" width="40px" height="40px">
    <img src="http://via.placeholder.com/350x150" width="90px" height="40px">
    <img src="http://via.placeholder.com/350x150" width="110px" height="40px">
  </div>
</div>

【讨论】：

非常感谢。这很有帮助！
很高兴！快乐编码:)

【解决方案2】：

删除.dropdown-content { ... } 中的display: block; 并可能将dropbtn 的标签更改为div 或smth。与固定宽度/高度类似，例如：https://jsfiddle.net/9m3af4od/

【讨论】：

感谢您的帮助