Navbar中的下拉菜单卡住了
我正在尝试使用下拉菜单制作Navbar。我希望“剪辑”具有带有3个链接的下拉菜单。但是我似乎无法正常工作。 如果我将位置设置为绝对，当我将其更改为亲戚时，它们将它们堆叠在彼此的范围内。有人可以帮忙吗？我必须更改选择器吗？
提前致谢！
.navbar{
display: flex;
justify-content: space-around;
align-items: center;
font-size: 18px;
background-color: darkred;
}
.nav-list{
list-style-type: none;
}
.dropdown{
position: relative;
display: inline-block;
list-style-type: none;
padding: 10px 10px;
border: solid black 1px;
border-radius: 10px;
margin: 2px;
}
.dropdown ul li{
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: darkred;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 10;
overflow: visible;
}
.dropdown-content a {
color: black;
padding: 12px 18px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.nav-list .list-item {
display: inline-block;
padding: 10px 10px;
border: solid black 1px;
border-radius: 10px;
margin: 2px;
}
.navbar a{
text-decoration: none;
color: white;
font-family: 'arvo', italic;
}
.logo{
height: 60px;
position: relative;
margin: 5px 0px 5px 17px;
}
.logo_text {
position: absolute;
top: 50px;
font-size: 12pt;
color: white;
}<body>
<header>
<nav class="navbar">
<div>
<img class="logo" src="img/FrankLogo.svg"> <h3 class="logo_text"><a href=index.html>FRANKIE</a></h3>
</div>
<ul class="nav-list">
<li class="dropdown"><a href="">Clips</a>
<ul>
<li class="dropdown-content"><a href="">Frankie Anthem</a></li>
<li class="dropdown-content"><a href="">Vrouwtjes</a></li>
</ul></li>
<li class="list-item"><a href="">Shows</a></li>
<li class="list-item"><a href="">Vieze Victor</a></li>
<li class="list-item"><a href="">Contact</a></li>
</ul>
</nav>
</header>I'm trying to make a Navbar with a dropdown menu. I want 'Clips' to have a dropdown menu with 3 links. But I can't seem to get it to work.
If i set the position to absolute i get them stacked on top of eachother en when i change it to relative they go inside the link. Can someone help? Do I have to change the selectors?
Thanks in advance!
.navbar{
display: flex;
justify-content: space-around;
align-items: center;
font-size: 18px;
background-color: darkred;
}
.nav-list{
list-style-type: none;
}
.dropdown{
position: relative;
display: inline-block;
list-style-type: none;
padding: 10px 10px;
border: solid black 1px;
border-radius: 10px;
margin: 2px;
}
.dropdown ul li{
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: darkred;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 10;
overflow: visible;
}
.dropdown-content a {
color: black;
padding: 12px 18px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.nav-list .list-item {
display: inline-block;
padding: 10px 10px;
border: solid black 1px;
border-radius: 10px;
margin: 2px;
}
.navbar a{
text-decoration: none;
color: white;
font-family: 'arvo', italic;
}
.logo{
height: 60px;
position: relative;
margin: 5px 0px 5px 17px;
}
.logo_text {
position: absolute;
top: 50px;
font-size: 12pt;
color: white;
}<body>
<header>
<nav class="navbar">
<div>
<img class="logo" src="img/FrankLogo.svg"> <h3 class="logo_text"><a href=index.html>FRANKIE</a></h3>
</div>
<ul class="nav-list">
<li class="dropdown"><a href="">Clips</a>
<ul>
<li class="dropdown-content"><a href="">Frankie Anthem</a></li>
<li class="dropdown-content"><a href="">Vrouwtjes</a></li>
</ul></li>
<li class="list-item"><a href="">Shows</a></li>
<li class="list-item"><a href="">Vieze Victor</a></li>
<li class="list-item"><a href="">Contact</a></li>
</ul>
</nav>
</header>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在顶部菜单中设置UL位置
Set UL position inside top menu