Question

我有我的网站的移动版本我已经添加了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>

Answer 1

您希望.dropdown显示在其他菜单上方，因此请添加更高的z-index。要将其放在所有其他元素上，请使用.dropdown { z-index: 11; }，然后您需要将.dropdown-content放在#Specials元素下方。 #Specials为top: 68px; height: 26px;，因此添加.dropdown-content { top: 94px; }（68 + 26 = 94）

下拉菜单错误的大小和错误的方向下降

1 个答案: