点击事件无法完全显示切换菜单

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 */
    }
}