下拉菜单隐藏在div后面

时间:2016-03-12 05:36:20

标签: html css

我是新来的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>
	
	
&#13;
<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>
&#13;
&#13;
&#13;

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

2 个答案:

答案 0 :(得分:0)

请在下面添加css

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

答案 1 :(得分:0)

只需在“#wrap #menu ul li”中添加position:relative。我认为你的问题已经解决了。如果您有任何其他问题,请将其放在此处。

感谢您的提问。