将UL的位置设置为固定，下拉菜单不起作用

Question

当我将 UL 的位置设置为固定时，当我将鼠标悬停在 GAMES 上时，下拉列表不会出现！但是当我删除位置固定然后下拉工作，但我的整个 UL 的位置发生变化

当我保持它固定时，它会像导航栏一样粘在屏幕的顶部和左侧，这就是我想要的，但是当我删除位置固定时，下拉菜单可以工作，但它不再粘在左侧和顶部，我尝试设置边距，但仍然没有粘在顶部和左侧！这是我的代码：

HTML 代码：-

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">Contact</a></li>
<li class="dropdown"><a href="#contact" class="dropbtn">Games</a>
 <div class="dropdown-content">
  <a href="#">PUBG</a>
  <a href="#">Fortnite</a>
  <a href="#">PUBG Mobile</a>
</div>
</li>
<li style="float:right"><a href="#about">About</a></li>
</ul>

CSS 代码：-

ul {
list-style-type: none;
padding: 0;
overflow: hidden;
background-color: #333;
top: 0;
left: 0;
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
}

li {
float: left;
}

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

li a:hover:not(.active) {
background-color: #111;
text-decoration: none;
color: white;
}



li.dropdown {
display: inline-block;
}

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

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

.dropdown-content a:hover {background-color: #333}

.dropdown:hover .dropdown-content {
display: block;
}

.active {
background-color: #80e5ff;
color: black;
text-decoration: none !important;
}

Answer 1

overflow: hidden;

请删除ul css 中的上述 css。

请运行代码 sn-p 看看。它正在按照您的预期工作。

ul {
list-style-type: none;
padding: 0;
background-color: #333;
top: 0;
left: 0;
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
position:fixed;
}

li {
float: left;
}

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

li a:hover:not(.active) {
background-color: #111;
text-decoration: none;
color: white;
}



li.dropdown {
display: inline-block;
}

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

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

.dropdown-content a:hover {background-color: #333}

.dropdown:hover .dropdown-content {
display: block;
}

.active {
background-color: #80e5ff;
color: black;
text-decoration: none !important;
}

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">Contact</a></li>
<li class="dropdown"><a href="#contact" class="dropbtn">Games</a>
 <div class="dropdown-content">
  <a href="#">PUBG</a>
  <a href="#">Fortnite</a>
  <a href="#">PUBG Mobile</a>
</div>
</li>
<li style="float:right"><a href="#about">About</a></li>
</ul>

Answer 2

当您使用 position: fixed 或 position: absolute 时，这些属性会从文档流中删除您的标签。如果您依赖于尝试使用这些值之一定位的标签的大小，那么您将遇到问题。

此外， position: fixed 可能不是您想要的，因为固定位置元素将相对于视口保持固定。您应该尝试 position: absolute 。这仍然会从文档流中删除该元素，但它会根据下一个相对定位的父元素定位它。