为何给CSS下拉导航栏添加position:sticky后下拉功能失效？

问题原因 #

下拉菜单失效的核心原因是导航栏父级<ul>设置了overflow: hidden属性：开启position: sticky后，该属性会裁剪所有超出导航栏本身高度的内容，绝对定位的下拉菜单超出了父级<ul>的高度，自然会被隐藏无法触发。同时原有代码中.mDrop存在冲突的定位规则，也会影响下拉菜单展示。

修复方案（纯CSS修改，无额外HTML结构） #

仅需调整CSS即可，不需要新增任何额外容器封装内容，完全符合你的需求：

• 删除<ul>选择器下的overflow: hidden属性，新增伪元素规则清除浮动，避免导航栏高度塌陷
• 删除.mDrop选择器下冲突的position: relative、top: 13.6rem冗余规则
• 取消position: sticky相关代码的注释

修改后完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-size: 28px;
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  position: -webkit-sticky; /* Safari兼容 */
  position: sticky;
  top: 0;
}
/* 新增清浮动规则，替代原来的overflow:hidden */
ul::after {
  content: "";
  display: table;
  clear: both;
}

li {
  float: left;
}

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

li .mDrop {
  visibility: hidden;
  opacity: 0;
  width: 8rem;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 0;
  display: none;
}

li a:hover, .mDrop li a:hover {
  background-color: green;
}

li:hover > ul,
li:focus-within > ul,
li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

ul li ul li {   
  clear: both; 
  width: 100%; 
}

.active {  
  background-color: #4CAF50;   
}
</style>
</head>
<body>

<div class="header">
  <h2>向下滚动页面</h2>
  <p>滚动到导航栏位置即可看到吸顶效果</p>
</div>

<ul>
  <li><a class="active" href="#home">首页</a></li>
  <li><a href="#news">新闻</a>
  <ul class="mDrop">
    <li><a href="#news">下拉项1</a></li>
    <li><a href="#news">下拉项2</a></li>
    <li><a href="#news">下拉项3</a></li>
  </ul>
  </li>  
  <li><a href="#contact">联系我们</a></li>
  <li style="float:right"><a href="#help">帮助</a></li>
</ul>

<h3>吸顶导航栏示例</h3>
<p>导航栏会在你滚动到对应位置时吸附在页面顶部</p>
<p>测试用滚动内容</p>
<div style="height:80vh"></div>
<p>测试用滚动内容</p>

</body>
</html>

内容的提问来源于stack exchange，提问作者DenisZ