Jquery .accordio（）菜单在其他div'之前捕捉；s

我的垂直菜单有问题，它是由jQueryUI的.accordion（）函数生成的。它会在我的水平菜单前自动捕捉（当您单击“游戏”选项时，它会打开此菜单）。如何设置它，使其位于水平菜单后面？我已经尝试过调整z-index，但如果它设置为负数，它就会停止工作。但是，它不会在水平菜单前捕捉

HTML:

jQuery/Javascript：

$(document).ready(function () {

    $("img").mousedown(function () {
        return false;
    });

    $(".s-o, .g-o").hide();

    $(".H-menu .option").mouseenter(function () {
        $(this).animate({backgroundColor: "#7894CC"});
    });
    $(".H-menu .option").mouseleave(function () {
        $(this).animate({backgroundColor: "#3B5998"});
    });

    $( ".V-menu" ).accordion({
        collapsible: true
    });


    $("#settings").click(function () {
        $(".s-o").show();
        $(".s-o").animate({
            opacity: 1.0
        });        
    });

    $("#containersettings").mouseleave(function () {
        $(".s-o").animate({
            opacity: 0
        }, function () {
            $(".s-o").hide();
        });
    });

    $("#games").click(function () {
        $(".g-o").show();
        $(".g-o").animate({
            opacity: 1.0
        });
    });
    $("#containergames").mouseleave(function () {
        $(".g-o").animate({
            opacity: 0
        }, function () {
            $(".g-o").hide();
        });
    });

});

jsFiddle：

---

您可以尝试将

#containercontainer

样式设置为

#containercontainer {
    overflow: auto;
    position: relative;
    z-index: 2;
}

哪一个好像是在手风琴前放下的

---

z-index

仅影响具有位置值的元素

$(document).ready(function () {

    $("img").mousedown(function () {
        return false;
    });

    $(".s-o, .g-o").hide();

    $(".H-menu .option").mouseenter(function () {
        $(this).animate({backgroundColor: "#7894CC"});
    });
    $(".H-menu .option").mouseleave(function () {
        $(this).animate({backgroundColor: "#3B5998"});
    });

    $( ".V-menu" ).accordion({
        collapsible: true
    });


    $("#settings").click(function () {
        $(".s-o").show();
        $(".s-o").animate({
            opacity: 1.0
        });        
    });

    $("#containersettings").mouseleave(function () {
        $(".s-o").animate({
            opacity: 0
        }, function () {
            $(".s-o").hide();
        });
    });

    $("#games").click(function () {
        $(".g-o").show();
        $(".g-o").animate({
            opacity: 1.0
        });
    });
    $("#containergames").mouseleave(function () {
        $(".g-o").animate({
            opacity: 0
        }, function () {
            $(".g-o").hide();
        });
    });

});

#containercontainer {
    overflow: auto;
    position: relative;
    z-index: 2;
}