导航栏下拉菜单显示在按钮上方而非下方问题求助

问题根源 #

下拉菜单出现覆盖按钮的情况，核心原因有两个：

• 下拉菜单使用position: absolute，但它的父容器（.navEvents/.navGear/.navClubs）未设置position: relative，导致绝对定位的参考对象是页面根元素，而非父容器，位置偏移至按钮上方。
• 父容器设置了overflow: hidden，会裁剪超出容器范围的内容，即使位置修正后也可能看不到完整的下拉菜单。

修复步骤 #

1. 给.navEvents、.navGear、.navClubs添加position: relative，让下拉菜单以这些容器为定位基准。
2. 移除这些父容器的overflow: hidden属性，避免下拉菜单被裁剪。
3. 给下拉菜单添加top: 100%，确保它精准对齐按钮底部，彻底避免覆盖问题。

修改后的完整代码 #

<!DOCTYPE html>
<html style="font-size: 16px;font-family: Roboto" lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test</title>
        <style>
        .navBar{
            overflow: hidden;
            background-color: red;
        }

        .navBar button{
            background: transparent;
            color: white;
            border: none;
            outline: none;
            padding: 14px 16px;
            height: 48px;
            width: 128px;
            font-size: 16px;
            float: left;
        }

        .navEvents, .navGear, .navClubs{
            float: left;
            position: relative; /* 添加相对定位，作为下拉菜单的定位基准 */
        }

        .dropdownEvents, .dropdownGear, .dropdownClubs{
            display: none;
            position: absolute;
            top: 100%; /* 对齐父容器底部，避免覆盖按钮 */
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

        .dropdownEvents a, .dropdownGear a, .dropdownClubs a{
          float: none;
          color: black;
          padding: 12px 16px;
          text-decoration: none;
          display: block;
          text-align: left;
        }

        .navEvents:hover .dropdownEvents{
            display: block;
        }

        .navGear:hover .dropdownGear{
            display: block;
        }

        .navClubs:hover .dropdownClubs{
            display: block;
        }
            
        </style>
    </head>
    <body>
        <h1>RUN63</h1>

        <div class="navBar">
            <button>Home</button>
            <div class="navEvents">
                <button>Events</button>
                <div class="dropdownEvents">
                    <a href="#">Live Events</a>
                    <a href="#">Past Events</a>
                    <a href="#">Ongoing Events</a>
                </div>
            </div>
            <div class="navGear">
                <button class="btnNavGear">Gear</button>
                <div class="dropdownGear">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
            </div>
            <div class="navClubs">
                <button class="btnNavClubs">Clubs</button>
                <div class="dropdownClubs">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
            </div>
            <button class="btnAbout">About</button>
        </div>

    </body>
</html>

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