固定位置下拉菜单

Question

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

如何创建适当的位置固定的下拉菜单，其中下拉内容不会影响菜单栏？

 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> 

Answer 1

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

哦，消除overflow: hidden; 来自ul元素。 如果您保留该属性，那基本上就是您的意思。 “任何从我的容器中出来的东西，躲起来！”。

如果保留该属性，则下拉内容菜单将设置为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>