jquery - 切换菜单在点击事件时不完全可见

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