我必须为学校制作一个网站（ICT课程），我用CSS制作了一个下拉菜单（有一些youtube帮助）。现在我想把菜单向下移动，这样我就可以在菜单上方放置横幅了。
除了蓝色背景外，我什么都能移动。我通过这样做来移动它：
#nav ul{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
top: 50px;
}
有人知道如何一次移动所有东西还是只移动蓝色背景吗？
代码：
body {
padding: 0;
margin: 0;
overflow-y: scroll;
font-family: Arial;
font-size: 18px
}
#nav {
background-color: #0000FF;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
top: 50px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #0066FF;
}
#nav ul li a,
visited {
color: #ccc;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li a:hover {
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #0066FF;
border: 5px solid #0000FF;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a,
visited {
color: #ccc;
}
#nav ul ul li a:hover {
color: #099;
}<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<link href="CSS/menu.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
<div id="nav_wrapper">
<ul>
<li><a href="#">Homepage</a>
<ul>
<li><a href="#">Kopje1a</a>
</li>
<li><a href="#">Kopje2a</a>
</li>
<li><a href="#">Kopje3a</a>
</li>
</ul>
</li>
<li>
<a href="#">Pagina2</a>
<ul>
<li><a href="#">Kopje2b</a>
</li>
<li><a href="#">Kopje2b</a>
</li>
<li><a href="#">Kopje2b</a>
</li>
</ul>
</li>
<li>
<a href="#">Pagina3</a>
<ul>
<li><a href="#">Kopje1c</a>
</li>
<li><a href="#">Kopje2c</a>
</li>
<li><a href="#">Kopje3c</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>我不能发布图片，因为这是我的第一个帖子，我没有超过10的声誉，我很抱歉。
批评总是受欢迎的，仇恨不是。
您已经在<div id="nav">
为了确保这个蓝色背景也移动，您需要移动包含的div，而不仅仅是UnsortedListdiv。
所以：
#nav{
background-color: #0000FF;
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
top: 50px;
}
应该为您完成
您的目标是#nav ul（无序列表），而不是导航栏本身，它实际上已经设置了后台属性。这样做：
#nav { top: 50px; }