gpt4 book ai didi

html - 下拉菜单隐藏在 div 后面

转载 作者:行者123 更新时间:2023-11-28 06:14:51 24 4
gpt4 key购买 nike

我是 CSS 新手,我的下拉菜单隐藏在 div 后面,请帮助我找出问题所在。我的 HTML 和 CSS 代码是:

<style>
*
{
margin:0px;
padding:0px;

}
body
{
background-color:mintcream;

}
#header
{

height:260px;
width:auto;
margin:5px;
}

#headerimg
{
height: 260px;
width:100%;

}


#wrap #menu
{
width:550px;
margin:0 auto;
padding:10px;
}

#wrap
{
height:50px;
background-color:lightsalmon;
border:1px solid white;
border-radius:5px;
}


#wrap #menu ul li
{
background-color:black;
border-radius:5px;
width: 120px;
height: 30px;
line-height: 30px;
float: left;
text-align: center;
list-style-type:none;
margin-left: 3px;

}

#wrap #menu ul li a{
color:white;
text-decoration:none;
display:block;
}

#wrap #menu ul li a:hover
{
background-color:mistyrose;
color:orangered;
border-radius:5px;

}

#wrap #menu ul li ul li
{

display:none;
}

#wrap #menu ul li:hover ul li
{

display:block;

}

#content
{

width:100%;
height:500px;
background-color: teal;
margin:5px;
}
#content1
{
width:50%;
height:500px;
background-color: yellow;
float:left;
}
#content2
{
width:50%;
height:500px;
background-color:red;
float:left;
}
</style>

<body>
<div id="header">
<img id="headerimg" src="doc.jpg" />

</div>

<div id="wrap">
<div id="menu">

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Food</a></li>
<li><a href="#">Hospital</a></li>
<li><a href="#">Medical</a></li>
</ul>


</li>
</ul>

</div>


</div>

<div id="content">
<div id="content1"> </div>
<div id="content2"> </div>

</div>
</body>

我是 CSS 新手。我的下拉菜单隐藏在 div 后面。请帮我找出问题所在。

最佳答案

请在下面添加css

 ul {position: relative; z-index: 99999; }

关于html - 下拉菜单隐藏在 div 后面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35954211/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com