我想知道你们是否可以帮助我，我已经开始为我的博客创建一个下拉菜单，在我看来它进展顺利，直到我意识到一旦我将鼠标悬停在下拉菜单上它就会消失光标，链接没问题，但是当我将光标悬停在下拉菜单上时，它会消失。
源代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Yeti™</title>
<link rel="stylesheet" href="main.css" />
<style type="text/css">
body
{
background-image:url(img.jpg);
background-repeat:no-repeat;
}
a:link{color:yellow;
text-decoration:none;}
a:visited{color:yellow;}
a:hover{background-color:none;
color:green;
text-decoration:bold;
text-decoration:underline;
font-weight:bold;}
#footer {position: absolute;
width: 1500px;
height: 80px;
bottom: 1px;
left: 0px;}
#main {position: absolute;
width: 600px;
height: 200px;
top: 160px;
left: 0px;}
</style>
</head>
<ul id="nav">
<div id="Title">
<p> Yeti Corporation™ </p>
--------------------------------------------------> ( This is the drop down menu )--------
<div id="wrapper">
<div id="navMenu">
<ul>
<li><a href="#">top</a>
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Recipes</a></li>
<li><a href="#">Recipes</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">top</a>
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Recipes</a></li>
<li><a href="#">Recipes</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">top</a>
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Recipes</a></li>
<li><a href="#">Recipes</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">top</a>
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Recipes</a></li>
<li><a href="#">Recipes</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">top</a>
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Recipes</a></li>
<li><a href="#">Recipes</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">top</a>
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Recipes</a></li>
<li><a href="#">Recipes</a></li>
</ul>
</li>
</ul>
--------------------------------------------------> ( This is the drop down menu )--------
</div>
<body>
<div id="video">
<video src="csgo.mp4" width="540" height="380" poster="csgo.jpg" controls></video>
</div>
<div id="main">
<div id="yeti">
<p> <div id="play">
</div></P>
</div>
<p>There is never enough to what you can do with programming</p>
<p> a Small Indie Development company Consisting of 4 people that works on Video games and Websites, as well as many other project we hope to get to in the future. Originally we where two separate companies, but when we realised the potential we had together we decided to merge to create Yeti Corp™.
If you are interested in Hiring a web developer go to the web development page. If you want to check up on the newest games and software updates, go to the game development page. a Small Indie Development company Consisting of 4 people that works on Video games and Websites, as well as many other project we hope to get to in the future. Originally we where two separate companies, but when we realised the potential we had together we decided to merge to create Yeti Corp™.
If you are interested in Hiring a web developer go to the web development page. If you want to check up on the newest games and software updates, go to the game development page. </p>
</div>
</div>
<div id="footer">
<a href="#" />Contact Us|</a>
<a href="#" />Web Dev|</a>
<a href="#" />Game Dev|</a>
<a href="#" />Graphic Designer|</a>
<a href="#" />Twitter Page|</a>
<a href="#" />FaceBook Page|</a>
<a href="#" />Gmail Page</a>
<p> All Rights Reserver Yeti LTD. 2014 Created by Head Web Developer, Hamza Issa</P>
</div>
</body>
</html>
CSS:
#body{
background: white;
}
#wrapper{
font:20px Tahoma;
}
--------------------------------------------------> ( This is the drop down menu )--------
#navMenu{
margin:0;
padding:30;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#999;
}
#navMenu li ul a {
text-align:center;
text-decoration:none;
font:20px Tahoma;
height:30px;
width:130px;
display:block;
color: blue;
border:1px solid black;
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:30px;
}
#navMenu ul li:hover ul {
display: block;
visibility:visible;
display: block;
}
--------------------------------------------------> ( This is the drop down menu )--------
#Title{
font: 30px Candara;
-webkit-box-shadow:rgba(110,110,110,.4) 10px 10px 10px;
padding-top: 5px;
padding-left: 100px;
color: orange;
}
#Search{
margin-left: 200px;
padding-bottom: 10px;
}
#Links{
padding-left: 400px;
font: bold 20px Tahoma;
padding-bottom: 30px;
}
#Links a:hover{
color: green;
}
#sign{
color: white;
font:20px Tahoma ;
padding-right: 100px;
padding-top: px;
}
#Sign_up{
padding-left: 400px;
padding-bottom: 200px;
}
#main{
font: 14px Courier ;
color: white;
width: 650px;
padding-left: 100px;
}
#yeti{
font: 45px Candara ;
}
#footer{
background: #E6EAEE;
color: black;
font: 20px impact;
text-align: center;
padding-bottom: 20px;
padding-right: 60px;
width: 1300px;
}
#video{
padding-left: 850px;
padding-top: 50px;
}
最佳答案
所以我对你的代码做了一个简化版本(以后你应该先做这个)并且能够缩小问题的范围。 #main 部分的位置与下拉列表混淆，它出现在它们的顶部。所以我做的简单事情就是将 z-index 添加到下拉列表中
#navMenu ul li ul {
position:absolute;
visibility:hidden;
top:30px;
z-index: 1;
}
#navMenu ul li:hover ul {
// display: block;
visibility:visible;
// display: block;
}
a:link {
color:yellow;
text-decoration:none;
padding: 10px;
}
a:visited {
color:yellow;
}
a:hover {
background-color:none;
color:green;
text-decoration:bold;
text-decoration:underline;
font-weight:bold;
}
#Title {
font: 30px Candara;
-webkit-box-shadow:rgba(110, 110, 110, .4) 10px 10px 10px;
padding-top: 5px;
padding-left: 100px;
color: orange;
}
#wrapper {
font:20px Tahoma;
}
#navMenu {
margin:0;
padding:30;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#999;
}
#navMenu li ul a {
text-align:center;
text-decoration:none;
font:20px Tahoma;
height:30px;
width:130px;
display:block;
color: blue;
border:1px solid black;
}
#navMenu ul li ul {
position:absolute;
visibility:hidden;
top:30px;
z-index: 1;
}
#navMenu ul li:hover ul {
visibility:visible;
}
#main {
font: 14px Courier;
color: red;
padding-left: 100px;
position: absolute;
width: 600px;
height: 200px;
top: 160px;
left: 0px;
}<div id="Title">
<p>Yeti Corporation™</p>
<div id="wrapper">
<div id="navMenu">
<ul>
<li><a href="#">top</a>
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Recipes</a></li>
<li><a href="#">Recipes</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">top</a>
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Recipes</a></li>
<li><a href="#">Recipes</a></li>
</ul>
</li>
</ul>
</div>
<div id="main">
<p>There is never enough to what you can do with programming</p>
</div>
</div>
</div>关于html - 当我将光标悬停在下拉菜单上时，下拉菜单一直消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33784888/