文本框重叠导致Dropdown功能异常，寻求正常下拉菜单实现方案

问题核心原因 #

你的下拉菜单出现被文本框覆盖、功能异常的问题，主要源于以下几点：

• 未设置层级优先级（z-index），导致菜单被其他元素压在下方
• 激活类的CSS选择器写法错误，菜单无法正常触发显示
• 父容器header未设置相对定位，下拉菜单的绝对定位参考对象错误
• 菜单图标缺少交互优化，点击体验不佳

修复方案与代码调整 #

修改后的HTML代码 #

<title>The Sun – Telling It As It Is</title>

<!---CSS link--->
<link rel="stylesheet" href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">

</head>
<body>

<!---HEADER--->
<header>
    <a href="#home" class="logo"><img src="img/Logo/logo.png"></a>

    <div class="bx bx-menu" id="menu-icon"></div>

    <div>
        <ul class="navbar">
            <li><a href="#home">Home</a></li>
            <li><a href="#listings">Listings</a></li>
            <li><a href="#contact">Contact</a></li>
            <li>
                <a href="#signup">Sign Up</a>
                <a href="#login">Login</a>
            </li>
        </ul>
    </div>
</header>

<script type="text/javascript" src="js/script.js"></script>

</body>
</html>

修改后的CSS代码 #

/* 给header设置相对定位，让下拉菜单以它为定位参考 */
header {
    position: relative;
    z-index: 998;
}

#menu-icon {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 0.5rem; /* 扩大点击区域 */
    cursor: pointer; /* 显示手型光标 */
    font-size: 1.5rem;
}

.navbar {
    position: absolute;
    top: -600px;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    background: white;
    text-align: left;
    transition: all .40s ease;
    z-index: 999; /* 强制菜单在最上层，避免被其他元素覆盖 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 添加阴影增强层次感 */
}

/* 修正选择器：去掉空格，匹配同时拥有navbar和active类的元素 */
.navbar.active {
    top: 100%; /* 用百分比替代固定值，适配不同高度的header */
}

.navbar a {
    display: block;
    padding: 1rem;
    margin: 0.5rem 1rem;
    text-decoration: none;
    color: #333;
}

.navbar a:hover {
    background-color: #f5f5f5; /* 添加hover效果提升交互体验 */
}

补充JS逻辑（script.js） #

const menuIcon = document.getElementById('menu-icon');
const navbar = document.querySelector('.navbar');

// 点击菜单图标切换显示状态
menuIcon.addEventListener('click', () => {
    navbar.classList.toggle('active');
    menuIcon.classList.toggle('bx-x'); // 切换图标样式（可选）
});

// 点击页面其他区域自动关闭菜单（可选）
document.addEventListener('click', (e) => {
    if (!menuIcon.contains(e.target) && !navbar.contains(e.target)) {
        navbar.classList.remove('active');
        menuIcon.classList.remove('bx-x');
    }
});

额外优化建议 #

• 菜单展开时给body添加overflow: hidden，防止页面滚动干扰操作
• 适配桌面端：添加媒体查询，在大屏幕下显示横向导航菜单，移动端保留下拉样式
• 可以给菜单添加背景遮罩，进一步强化下拉菜单的层级感

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