Question

这是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>

Answer 1

您的代码中存在一些错误。首先，您试图将鼠标悬停在包含菜单的未闭合div上。另一方面，你设置＆＃39; display：block＆＃39;在最初的CSS！这有效：

＆＃13;

.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");
}

＆＃13;

<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>

＆＃13;

Answer 2

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

为什么我的下拉菜单卡住了？ HTML

2 个答案: