切换菜单在点击事件中不完全可见

Question

当用户单击按钮时，我必须创建带有项目的切换菜单。但该菜单并不完全可见。

在 html 中，我定义了带有菜单的切换按钮：

<div class="button toggle">Toggle on right
    <div class="toggle-menu">
        <a href="#">Link 1</a><br />
        <a href="#">Link 2</a><br />
        <a href="#">Link 3</a>
    </div>
</div>

还有 CSS (SCSS)：

.button {
    position: relative;
    display: inline-block;
    padding: 5px 8px;
    margin: 5px 20px;
    background-color: lime;
    border: 1px solid gray;
    border-radius: 3px;
    cursor: pointer;

    &.toggle > .toggle-menu {
        position: absolute;
        top: 32px;
        right: 0;
        background-color: lime;
        border: 1px solid gray;
        width: 100%;
        display: none;
    }
}

这是JSFIDDLE，我的完整代码在哪里。

PS： 这不是我在实时页面上的实际代码。就像例子，但同样的问题。

Answer 1

应用 z-index：

.button {
    position: relative;
    display: inline-block;
    padding: 5px 8px;
    margin: 5px 20px;
    background-color: lime;
    border: 1px solid gray;
    border-radius: 3px;
    cursor: pointer;

    &.toggle > .toggle-menu {
        position: absolute;
        top: 32px;
        right: 0;
        background-color: lime;
        border: 1px solid gray;
        width: 100%;
        display: none;
        z-index: 99; /* added here */
    }
}