gpt4 book ai didi

html - 位置固定下拉菜单

转载 作者:行者123 更新时间:2023-11-28 02:18:18 25 4
gpt4 key购买 nike

我创建了一个位置固定的下拉菜单,但是当我去选择一个下拉内容时,整个菜单栏都折叠起来了。请参阅所附图片。

如何创建一个位置固定的下拉菜单,下拉菜单的内容不影响菜单栏?

Error Exmple

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #003746;
position: fixed;
top: 0;
}

li {
float: left;
}

li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-radius: 42px;
}

li a:hover,
.dropdown:hover .dropbtn {
background-color: green;
border-radius: 42px;
}

li.dropdown {
display: inline-block;
color: white
}

.dropdown-content {
display: none;
position: static;
background-color: #003746;
min-width: 16px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}

.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {
background-color: green
}

.dropdown:hover .dropdown-content {
display: block;
}
<ul>
<li><img class="center" width="80" height="50" title="Example"></li>
<li class="dropdown">
<a class="dropbtn">AAA</a>
<div class="dropdown-content">
<a>AAA - AAA</a>
<a>AAA1 - AAA1</a>
</div>
</li>
<li class="dropdown">
<a class="dropbtn">BBB</a>
<div class="dropdown-content">
<a>BBB - BBB</a>
<a>BBB1 - BBB1</a>
</div>
</li>
</ul>

最佳答案

您必须设置 position: absolute;dropdown-content 类中。然后它会起作用。 position: static;是任何元素的初始位置。

哦,删除 overflow: hidden;来自 ul 元素。如果您保留该属性,您基本上就是在说。 “任何从我的容器里出来的东西,躲起来!”。

如果保留该属性,dropdown-content 菜单将设置为 display: block;但不可见,因为它被其父元素(<ul> 元素)隐藏了。

ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #003746;
position: fixed;
top: 0;
}

li {
float: left;
}

li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-radius: 42px;
}

li a:hover,
.dropdown:hover .dropbtn {
background-color: green;
border-radius: 42px;
}

li.dropdown {
display: inline-block;
color: white
}

.dropdown-content {
display: none;
position: absolute;
background-color: #003746;
min-width: 16px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}

.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {
background-color: green
}

.dropdown:hover .dropdown-content {
display: block;
}
<ul>
<li><img class="center" width="80" height="50" title="Example"></li>
<li class="dropdown">
<a class="dropbtn">AAA</a>
<div class="dropdown-content">
<a>AAA - AAA</a>
<a>AAA1 - AAA1</a>
</div>
</li>
<li class="dropdown">
<a class="dropbtn">BBB</a>
<div class="dropdown-content">
<a>BBB - BBB</a>
<a>BBB1 - BBB1</a>
</div>
</li>
</ul>

关于html - 位置固定下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48344471/

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