Jquery 单击事件时切换菜单不完全可见

我必须创建切换菜单与项目，当用户点击按钮。但菜单并不是完全可见的

在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>

这是我的全部代码

PS:这不是我在live页面上的实际代码。正如示例所示，但问题相同。

应用z索引：

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

---

谢谢，这在本例中有效，但在实时代码中不起作用（原因：我已经有了元素的z索引），所以我将尽快更新问题。不，这没有帮助。我会尽量做更好的复制，我在网站上的实际代码太长，无法发布在这里或JSFIDLE（idk哪里有错误）。我会尽可能多地尝试，但我无法向您展示全部代码，这是商业和公司问题。@debute:复制问题或在您面临问题的地方共享代码。根据所回答的问题，我会自己尝试，我将所有风格从网站复制到JSFIDLE，仍然只在JSFIDLE上工作。

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