如何将菜单显示在按钮上方而非页脚区域？

当前下拉菜单点击后会显示在按钮下方的页脚区域，无法悬浮在按钮上方或其他内容之上，以下是问题排查和修复方案：

问题根源 #

1. 菜单未脱离文档流：默认布局下菜单会占据文档空间，导致被挤到页面下方
2. HTML结构错误：菜单嵌套了多余的容器标签，且存在未闭合的标签
3. CSS拼写/选择器错误：ont-size应为font-size，j-slider选择器名称不匹配
4. 缺少层级控制：未设置z-index确保菜单显示在其他内容上方

修正后的代码 #

HTML #

<div id="menu-container" style="position: relative; display: inline-block;">
    <a id="menu-toggle" class="pHiOh" href="javascript:void(0);">Settings</a>
    <div class="ja-menu">
        <a class="ja-menu-item" href="#">Search settings</a>
        <a class="ja-menu-item" href="#">Advanced search</a>
        <a class="ja-menu-item" href="#">Your data in Search</a>
        <a class="ja-menu-item" href="#">Search history</a>
        <a class="ja-menu-item" href="#">Search help</a>
        <a class="ja-menu-item" href="#">Send feedback</a>
        <div class="ja-divider"></div>
        <div class="ja-menu-item ja-toggle-container">
            <span>Dark theme:</span>
            <label class="ja-switch">
                <input type="checkbox" id="j-dark-theme-toggle">
                <span class="ja-slider round"></span>
            </label>
        </div>
    </div>
</div>

CSS #

.ja-menu {
    width: 154.5px;
    height: 238px;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 0;
    border-radius: 10px;
    box-sizing: border-box;
    /* 核心定位样式 */
    position: absolute;
    top: 100%; /* 菜单紧贴按钮下方 */
    right: 0; /* 对齐按钮右侧，可改为left:0对齐左侧 */
    z-index: 999; /* 确保菜单在最上层 */
}

.ja-menu-item {
    display: block;
    padding: 10px;
    justify-content: center;
    text-decoration: none;
    transition: background 0.3s;
    font-size: 14px; /* 修正拼写错误 */
    font-family: arial, sans-serif;
    color: #202124;
    box-sizing: border-box;
}

.ja-menu-item-text {
    text-align: left;
}

.ja-menu-item:hover {
    background: #DADCE0;
}

.ja-divider {
    height: 1px;
    background-color: #DADCE0;
    margin: 0;
}

.ja-toggle-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}

.ja-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.ja-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ja-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.ja-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

/* 修正选择器名称错误 */
.ja-switch input:checked + .ja-slider {
    background-color: #2196F3;
}

.ja-switch input:focus + .ja-slider {
    box-shadow: 0 0 1px #2196F3;
}

.ja-switch input:checked + .ja-slider:before {
    transform: translateX(26px);
}

JavaScript #

document.addEventListener('DOMContentLoaded', function() {
    const toggleButton = document.getElementById('menu-toggle');
    const menu = document.querySelector('.ja-menu');

    menu.style.display = 'none';

    toggleButton.addEventListener('click', function() {
        menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
    });
});

关键修改说明 #

• 给.ja-menu添加position: absolute脱离文档流，配合父容器的position: relative实现相对按钮的定位
• 通过top: 100%和right: 0控制菜单位置，可根据需求调整为left: 0或其他值
• z-index: 999确保菜单显示在页面其他内容之上
• 修复了HTML结构冗余和CSS中的拼写/选择器错误

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