div后面出现下拉菜单

Question

div后面出现下拉菜单

Sto*_*146 7 html css menu z-index drop-down-menu

我刚刚学习 HTML 和 CSS，并开始制作我的第一个布局模板。

当我尝试在布局上使用下拉菜单时遇到问题。

菜单会下拉，但其中一部分隐藏在菜单栏下方的 div 后面。

我尝试过向与菜单相关的任何内容添加 z 索引，但是我不太确定将其放在哪里才能使其正常工作。

如果我从 #main div 中删除背景颜色，您可以看到下拉列表的其余部分，但您实际上无法单击链接，因为如果您将鼠标移到 div 之外，下拉列表会再次消失。

这是我正在使用的代码：

#menu {
    float: left;
    background-color: #eeeeee;
    width:1000px;
    border: 1px solid black;
    height: 50px;
}

#main {
    float: left;
    width: 990px;
    height: 50px;
    background-color: white;
    border: 1px solid black;
    padding-left: 10px;
}

/* Just making the links look a bit like buttons */

#menu ul {
margin-left: -2.5em;
}

#menu li ul {
display: none;
}

#menu li:hover ul {
display: block;
}

#menu li {
list-style-type: none;
width: 8em;
text-align: center;
float: left;
margin-right: 1em;
}

#menu a {
color: black;
text-decoration: none;
display: block;
box-shadow: 5px 5px 5px grey;
background-color: #CCCCCC;
border: 1px outset grey;
border-radius: 5px;
}

#menu a:hover {
background-color: #DDDDDD;
border: none;
box-shadow: 2px 2px 2px grey;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE HTML>
    
    <html lang="en-GB">
        
        <head>
            <meta charset="UTF-8">
            <title>Test</title>
            <link rel="stylesheet" 
                  type="text/css" 
                  href="test.css">
        </head>
        
        <body>
        
        <div id="menu">
        <ul>
           <li><a>Link1</a></li>
           <li><a>Link1</a></li>
           <li><a>Link3</a>
                <ul>
                    <li><a>SubLink1</a></li>
                    <li><a>SubLink2</a></li>
                </ul>
           </li>
           <li><a>Link4</a></li>
        </ul>
        </p>
        </div>
        
        <div id="main">
            
            <p>
                Lorem ipsum dolor sit amet, similique assueverit id pro. Agam insolens
                deterruisset ei usu. In eos vocent numquam, an exerci tamquam complectitur
                his.
            </p>
            
        </div>
        
        </body>
        
    </html>

Run Code Online (Sandbox Code Playgroud)

如何让菜单下拉到下面的 div 上？帮助！

Answer 1

Fra*_*aša 5

使用z-index更改 z 轴位置。将其设置为任何大于 1 的数字（1 为默认值）并设置 position属性。

#menu {
    z-index: 2;
    position: relative;
}

Run Code Online (Sandbox Code Playgroud)

Answer 2

小智 5

确保不要隐藏溢出。如果它设置为隐藏，它将不允许您的新 div（在溢出：隐藏的父元素内）弹出或与其他 div 重叠。

归档时间：	10 年，12 月前
查看次数：	32278 次
最近记录：	5 年，7 月前