2013-08-21 92 views
0

我在顶部有一个导航菜单,内容与导航菜单重叠。我想要的是内容必须在导航栏下方。如何解决这个问题?请帮帮我?导航菜单中的内容重叠?

下面是截图: http://s1277.photobucket.com/user/fuscia_pink19/media/ss_zps888fc3e9.png.html

正如你所看到的AAAA字母导航栏上也。

这里是我的代码:

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
body { 
margin: 0; 
padding: 0; 
} 

nav { 
float: right; 
position: absolute; 
top: 28%; 
right: 16%; 
font-size: 20px; 
} 

nav li { 
list-style: none; 
display: inline; 
} 

nav li a { 
text-decoration: none; 
color: #a4d0dd; 
padding: 11px 25px; 
} 

#wrap { 
position: fixed; 
left: 0; 
top: 0; 
background-color: black; 
width: 100%; 
height: 80px; 
border-bottom: 1px solid #444444; 
} 
</style> 
</head> 
<body> 
<div id="wrap"> 

<nav> 
<ul> 
<li> 
<a href="#">Home</a> 
</li> 

<li> 
<a href="#">My Profile</a> 
</li> 

<li> 
<a href="#">Account</a> 
</li> 

<li> 
<a href="#">Logout</a> 
</li> 
</ul> 
</nav> 
</div><!-- ENDING TOP_MENU DIV --> 
<div class="content"> 
a<br /> 

a<br /> 

a<br /> 

a<br /> 

a<br /> 

a<br /> 

</div> 
</body> 
</html> 
+0

摆脱'位置:fixed'在'#wrap'中。 – putvande

+0

你好putvande感谢回答,但我也想导航保持在上面。因为我想要一个可滚动的导航?就像在Facebook一样。 –

+0

截图与您的代码不同。通过此代码,内容位于导航之后。 – putvande

回答

0

得到“下面”你需要添加一个margin-top具有相同的高度,你的导航栏导航的内容,在这种情况下,“80px”

所以你添加这行到你的CSS:

.content { margin-top: 80px; }