我的网站有一个移动版本，我在其中添加了 CSS 来处理下拉菜单，但我遇到的问题是下拉菜单的位置和大小不正确。作为 CSS 的新手，我对如何解决这个问题感到困惑。有帮助吗？
这是显示特价按钮示例的网站 http://brianrobinsonenterprises.us/mobile.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>psdtowebbremobile.psd</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div id="background">
<div id="Layer0"><img src="images/Layer0.png"></div>
<div id="Layer1"><img src="images/Layer1.png"></div>
<div id="DVD"><img src="images/DVD.png"></div>
<div class="dropdown"><div id="Specails"><span><img src="images/Specails.png"></div>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
<div id="Categories"><img src="images/Categories.png"></div>
<div id="Rectangle1"><img src="images/Rectangle1.png"></div>
<div id="Shape1"><img src="images/Shape1.png"></div>
<div id="DVDcopy"><img src="images/DVDcopy.png"></div>
<div id="Specailscopy"><img src="images/Specailscopy.png"></div>
<div id="Categoriescopy"><img src="images/Categoriescopy.png"></div>
</div>
</body>
</html>
最佳答案
您希望 .dropdown 出现在其他菜单之上，因此添加更高的 z-index。要将其置于所有其他元素之上，请使用 .dropdown { z-index: 11; } 然后您需要将 .dropdown-content 放在 #Specials 元素下方。 #Specials 是 top: 68px; height: 26px; 所以添加 .dropdown-content { top: 94px; (68 + 26 = 94)
关于html - 下拉菜单尺寸错误，下拉菜单方向错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45286907/