CSS导航栏下拉菜单无法始终定位在触发按钮下方问题求助

绝对定位元素的定位参考对象是最近的开启了非static定位的祖先元素，你的代码存在3个核心问题导致定位失效：

• 下拉菜单的直接父容器.dropdownL没有设置定位属性，导致设置了position: absolute的下拉菜单直接相对于页面根元素定位，因此设置left: 0时菜单会跑到页面最左侧
• 导航栏.navbar设置了overflow: hidden，下拉菜单展开后高度超出导航栏固定高度的部分会被直接裁剪，这也是你把下拉菜单改成position: relative时菜单“消失”的核心诱因
• 下拉菜单没有设置top属性，无法自动对齐到触发按钮的底部位置

只需要修改对应CSS属性即可，不需要改动HTML结构，修复后可适配任意屏幕宽度，下拉菜单始终对齐触发按钮正下方：

• 给.dropdownL添加position: relative，将其设为下拉菜单的定位参考容器
• 删除.navbar上的overflow: hidden属性，避免下拉内容被裁剪
• 给.dropdown-contentL设置top: 100%、保留left: 0，此时菜单会自动贴齐父容器（即触发按钮所在区域）的左下角，窗口缩放时会跟随父容器自动移动，不会错位
• 删除grid布局下不生效的float相关冗余属性，避免旧浮动规则引发布局冲突

CSS部分 #

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.navbar {
  background-color: #333;
  font-family: Arial, Helvetica, sans-serif;
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 46px;
  border: white 1px solid;
}

.navbar a {
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdownL {
  position: relative;
}

.dropdownL .dropbtnL {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit;
  margin: 0;
  width: 100%;
}

.navbar a:hover,
.dropdownL:hover .dropbtnL {
  background-color: red;
}

.dropdown-contentL {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 400px;
  left: 0;
  top: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-contentL .header {
  background: red;
  padding: 16px;
  color: white;
}

.dropdownL:hover .dropdown-contentL {
  display: block;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}

.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.column a:hover {
  background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

HTML部分 #

<body>
<div class="navigationrow">
  <div class="navbar">
      <div> <a href="#home">one</a></div>
      <div><a href="#news">Two</a></div>
      <div class="dropdownL">
          <button class="dropbtnL">Three
       <i class="fa fa-caret-down"></i>
         </button>
          <div class="dropdown-contentL">
              <div class="header">
                  <h2> Menu</h2>
              </div>
              <div class="row">
                  <div class="column">
                      <h3>Category 1</h3>
                      <a href="#">Link 1</a>
                      <a href="#">Link 2</a>
                      <a href="#">Link 3</a>
                  </div>
                  <div class="column">
                      <h3>Category 2</h3>
                      <a href="#">Link 1</a>
                      <a href="#">Link 2</a>
                      <a href="#">Link 3</a>
                  </div>
                  <div class="column">
                      <h3>Category 3</h3>
                      <a href="#">Link 1</a>
                      <a href="#">Link 2</a>
                      <a href="#">Link 3</a>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>
</body>

补充说明：如果需要下拉菜单和触发按钮居中对齐，只需要把.dropdown-contentL的left:0改成left: 50%; transform: translateX(-50%);即可，同样支持全分辨率自适应。

内容的提问来源于stack exchange，提问作者Lost in Symbols