如何移动下拉菜单（CSS）？

I have to make a website for school (ICT class), and I made a dropdown menu with CSS (with some youtube help). Now I want to move my menu down so I can place a banner above the menu.

我必须建立一个学校网站(ICT课程),我用CSS制作了一个下拉菜单(有一些youtube帮助)。现在我想将菜单向下移动,这样我就可以在菜单上方放置横幅。

I can move everything except for the blue background. I moved it by doing this:

我可以移动除蓝色背景之外的所有东西。我通过这样做移动了它:

#nav ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    top: 50px;
    }

Does anybody know how to move everything at once or just move the blue background?

有人知道如何一次移动所有东西或只是移动蓝色背景?

Code:

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>

I can't post images cause this is my first post and I don't have more then 10 reputation, I'm sorry.

我无法发布图片,因为这是我的第一篇文章,我没有超过10个声望,对不起。

Criticism is always welcome, Hating is not.

批评总是受欢迎的,恨不是。

2 个解决方案

#1

You have defined the blue background in the < div id="nav" >

您已在

中定义了蓝色背景

To make sure this blue background also moves you need to move the containing div and not just the Unsorted List div.

要确保此蓝色背景也移动,您需要移动包含div而不仅仅是未排序列表div。

so:

#nav{
background-color: #0000FF;
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
top: 50px;
}

should do the trick for you

应该为你做的伎俩

#2

You're targeting #nav ul( the unorderd list ) not the navbar itself, which actually has the background property set. Do that:

你的目标是#nav ul(无序列表),而不是导航栏本身,它实际上设置了背景属性。去做:

#nav { top: 50px; }

#1