there is a cross area between the secondary menu and the actual click area

div

HTML:

<div class="level1-group dragDocument">
    <a class="menu-level1">
        <div>
            <img src="resource/template/image/circle.png" >
        </div><span>23</span> </a>
</div>
<div class="level2-group">
    <div class="menu-level2">
        <div class="menu-level2-bg dragDocument">
            <img src="resource/template/image/01.png">
            <span class="nav-text-link">24</span>
        </div>
    </div>

    <div class="menu-level2">
        <div class="menu-level2-bg dragDocument">
            <img src="resource/template/image/01.png">
            <span class="nav-text-link">25</span>
        </div>
    </div>
    <div class="menu-level2">
        <div class="menu-level2-bg dragDocument">
            <img src="resource/template/image/01.png">
            <span class="nav-text-link">26</span>
        </div>
    </div>
</div>

CSS:

    .menu li .level1-group a {
        position: absolute;
        display: block;
        height: 200%;
        width: 200%;
        color: -sharpfff;
        pointer-events: auto;
        text-align: center;
        text-decoration: none;
        font-size: 40px;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        transition: all 0.5s ease;
        background-size: contain;
    }

    .menu li a span {
        display: block;
        font-size: 22px;
        text-transform: uppercase;
        position: absolute;
        top: 57px;
        text-align: center;
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-family: microsoft yahei;
    }
    .menu-level2 {
        height: 0;
        width: 0;
        top: 50%;
        left: 50%;
        opacity: 0;
        position: absolute;
        transition: all 0.7s linear;
        z-index: 1;
        transform-origin: 100% 100%;
    }
    .menu-level2-bg {
        height: 63%;
        width: 63%;
        position: absolute;
        overflow: hidden;
        z-index: 15;
    }
    .menu-level2-bg img {
        height: 100%;
        width: 100%;
        position: absolute;
    }

    .menu-level2-bg span {
        top: 43px;
        left: 2px;
        font-size: 28px;
        position: absolute;
        transform: rotate(-45deg);
        color: -sharp3f448cd1;
        width: 100%;
        text-align: center;
        height: 88px;
        line-height: 88px;
        font-family: microsoft yahei;
    }

Js:

 //
$(document).on("click", ".menu-level1", function(e) {
    e.stopPropagation();
    var $this = $(this);
    if ($this.find("span").html() != "") {
        var level2Length = $(this).parents("li").find(".menu-level2").length;
        if (level2Length > 0) {                   
            var degree = parseInt($(this).parent().attr("degree")) - 15;
            var level2CurrentDegree = degree;
            $this.parents("li").find(".menu-level2").each(function(index, element) {
                $(element).css({
                    "transform": "rotate(" + level2CurrentDegree + "deg)"
                });
                level2CurrentDegree = level2CurrentDegree + 45;
            });
        }
    }
});
 // 
$(document).on("click", ".menu-level2-bg", function(e) {
    e.stopPropagation();
    var $this = $(this);
    var thirdImageLength;
    var $level2 = $(this).parents(".menu-level2");
    var index = $level2.index();
    var $levels = $(this).parents(".level2-group").siblings(".level3-group").find(".menu-level3");
    if ($this.find("span").html() == "") {
        return false;
    }
    $this.parents(".menu").find(".menu-level3").removeClass("open-level3");
    thirdImageLength = $levels.eq(index).find(".eleContainer").length;
    if(thirdImageLength>3){
        $levels.eq(index).find("a").css("display","");
    }
    $levels.eq(index).addClass("open-level3");
});

then adjust the z-index size so that the height of the child element is greater than that of the parent element, which can not be solved. Please help me!