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

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上。 另外，您可以在初始CSS上设置“ display：block”！ 这有效：

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

Answer 2

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