Question

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

我可以移动除蓝色背景之外的所有内容。我通过这样做移动了它：

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

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

代码：

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

我无法发布图片，因为这是我的第一篇文章而且我的声誉不超过10，我很抱歉。

总是欢迎批评，恨不是。

Answer 1

您已在＆lt;中定义了蓝色背景。 div id =“nav”＆gt;

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

这样：

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

应该为你做的伎俩

Answer 2

您的目标是#nav ul（无序列表），而不是导航栏本身，它实际上设置了背景属性。那样做：

#nav { top: 50px; }

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

2 个答案: