gpt4 book ai didi

html - 如何移动下拉菜单(CSS)?

转载 作者:太空宇宙 更新时间:2023-11-04 12:51:08 25 4
gpt4 key购买 nike

我必须为学校(ICT 类(class))制作一个网站,并且我使用 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,对不起。

欢迎批评,仇恨不是。

最佳答案

你已经在

关于html - 如何移动下拉菜单(CSS)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26147350/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com