我想知道你是否有人可以帮助我，我已经开始为我的博客创建一个下拉菜单，它在我的视角中很顺利，直到我意识到下拉菜单会在我与我一起徘徊时消失光标，链接很好，但当我将光标悬停在下拉菜单上时，它会消失。
源代码：
:set sessionoptions-=options
CSS：
<!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>
答案 0 :(得分：0)
所以我制作了你的代码的简化版本（将来你应该先做这个）并且能够缩小问题的范围。您的#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>