css如何固定下拉菜单的位置

Posted 2023-04-25

参考技术A CSS有个position属性，它有4个值：static，relative，absolute，fixed。分别代表了正常位置，相对于某一位置的偏移位置，绝对位置，固定位置。要想显示在一个网页上，固定位置可以实现不会随着页面滚动条的移动而不见了，它一直在你当前的页面上，但是ie6不兼容这个属性。当然如果你的页面不会产生滚动条，那么absolute也是可以的。本回答被提问者和网友采纳 参考技术B 你说的下拉菜单是指 select标签 还是用div模拟出来的下拉菜单追问

div模拟的

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

【中文标题】将UL的位置设置为固定，下拉菜单不起作用

【英文标题】：Set the position of UL to fixed, the dropdown does not work

【发布时间】：2018-11-05 11:23:25

【问题描述】：

当我将 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;

【参考方案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>

【讨论】：

你也添加 position:fixed in ul

你能和我分享你的代码吗？所以我会帮你修复这个错误。

你已经完成了溢出：可见和位置：固定？顺便说一句，它很有效:)

欢迎您。您正在使用 * 溢出：隐藏； 。这个 CSS 适用于所有元素。如果你不想要这个 css。请删除它，否则你每次都会卡住。

【参考方案2】：

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

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

【讨论】：

我将我的 UL 定位为绝对值，现在我的条形图固定在顶部和左侧，但现在当我将鼠标悬停在游戏上时，下拉列表不会出现 :( 我还删除了溢出：隐藏