我的下拉菜单位于我的内容下。任何人都可以帮助我让它过去吗？ 代码 -
body {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 17px;
background-color: #333;
}
#nav {
background-color: #222;
border-bottom: 5px solid #d30c43;
}
#nav_wrapper {
width: 1000px;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
margin-bottom: -3px;
}
#nav ul li {
display: inline-block;
}
#nav ul li a,
visited {
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav_wrapper ul ul li:hover a {} #content {
margin-left: auto;
margin-right: auto;
overflow: visible;
width: 75%;
position: relative;
}
#nav ul li ul li a {
color: #FFF;
}
#nav ul ul li a:hover {
color: #d30c43;
}
.primary a:link {
color: #FFF;
}
.primary a:visited {
color: #fff;
}
.primary a:hover {
color: #d30c43;
}
* {
margin: 0px;
}
#slider {
height: 400px;
width: 650px;
margin: 50px auto;
position: relative;
border-radius: 4px;
overflow: hidden;
float: left;
border: 3px solid black;
}
#image {
height: 400px;
width: 650px;
position: absolute;
}
.left_hold {
height: 400px;
width: 100px;
position: absolute;
top: 0px;
left: 0px;
}
.right_hold {
height: 400px;
width: 100px;
position: absolute;
top: 0px;
right: 0px;
}
.left {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
left: 20px;
opacity: 0;
transition: all .2s ease-in-out 0s;
cursor: pointer;
}
.right {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
right: 20px;
opacity: 0;
transition: all .5s ease-in-out 0s;
cursor: pointer;
}
.left_hold:hover .left {
opacity: 0.6;
}
.right_hold:hover .right {
opacity: 0.6;
}
#top10 {
position: relative;
margin: 50px auto;
width: 267px;
float: right;
color: #fff;
height: 286px;
}
.top10click a {
color: #fff;
}
#topArticle {
position: relative;
float: left;
color: #fff;
width: 800px;
}<html>
<head>
<title>
GameTopic
</title>
<link rel="stylesheet" type="text/css" href="css.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<script src="js/alert_tut.js"></script>
</head>
<body onLoad="photoA()">
<div id="content">
<div id="nav">
<div id="nav_wrapper">
<img style="float:right; margin-top:2px; margin-bottom:2px;" src="logo.png" width="200" height="40">
<div id="strip"></div>
<ul>
<li class="primary"><a href="index.html"><b>HOME</b></a>
<li class="primary"><a href="news.html">News</a>
</li>
</li>
<li class="primary"> <a href="reviews.html">Reviews</a>
<ul>
<li><a href="rev-gaming.html">Gaming</a>
</li>
<li><a href="rev-soft.html">Software</a>
</li>
<li><a href="rev-hard.html">Hardware</a>
</li>
<li><a href="rev-custom.html">Custom Builds</a>
</li>
<li><a href="rev-yt.html">Youtube Channels</a>
</li>
</ul>
</li>
<li class="primary"> <a href="hardware.html">Hardware</a>
<ul>
<li><a href="rev-hard.html">Reviews</a>
</li>
<li><a href="hard-parts.html">Best parts</a>
</li>
<li><a href="hard-budget.html">Budget Builds</a>
</li>
</ul>
</li>
<li class="primary"> <a href="software.html">Software</a>
<ul>
<li><a href="soft-news.html">News</a>
</li>
<li><a href="rev-soft.html">Reviews</a>
</li>
<li><a href="soft-recom.html">Recommended</a>
</li>
</ul>
</li>
<li class="primary"> <a href="gaming.html">Gaming</a>
<ul>
<li><a href="game-news.html">News</a>
</li>
<li><a href="game-parts.html">Best Parts</a>
</li>
<li><a href="game-accesor.html">Best Accessories</a>
</li>
<li><a href="game-recom.html">Recommended Games</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- Nav wrapper end -->
</div>
<div id="top10">
<h5 class="Game10"> GameTopic's Top 10 of the week </h5>
<div id="t10Title">
<h4 class="t10list"> Top 10: Indie Games of the Week</h4>
</div>
<div id="10Content">
<ol "listContent">
<br>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<br>
<div class="top10click">
<p> <b><u><a href="#">Click here</a></u> to see the full article! </div><b>
</div>
</div>
<div id="topArticle">
<div id="ArticleTitle"><h1> Article Title</div>
<div if="ArticleText"> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div></div>
<div id="slider">
<img src="img1.jpg" id="image" >
<div class="left_hold"><img onClick="photo(-1)" class="left" src="arrow_left.png"></div>
<div class="right_hold"><img onClick="photo(1)" class="right" src="arrow_right.png"></div>
</div>
</body>
</html>
答案 0 :(得分：1)
在CSS中使用z-index。较高的数字会将其置于其他元素的前面，而后面的数字较小（允许使用负数）。
示例：
#nav ul li:hover ul {
display: block;
z-index:10;
答案 1 :(得分：0)
您需要为菜单指定z-index以使其显示在顶部：
#nav_wrapper ul {
z-index: 100;
}