[css level] set the gray block of zmuri indexRue 1, but it doesn't work?

question: want to implement gray blocks in the following
screenshot:

code is as follows:

< html lang= "en" >
< head >

<meta charset="UTF-8">
<title>Title</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    a{
        text-decoration: none;
        color: -sharp333333;
    }
    .menu{
        width: 400px;
        height: 400px;
        position: relative;
        text-align: center;
        background-color: antiquewhite;
        z-index: 0;
    }
    .menu>.fir_menu{
        height: 50px;
        width: 300px;
        border-radius: 25px 0 0 25px;
        background-color: orange;
        border: 1px solid red;
        position: absolute;
        right: 0;
        top: 300px;
        z-index: 1;
    }
    .menu>.fir_menu>li{
        position: relative;
        z-index:1;
    }
    .menu>.fir_menu>li>a{
        width: 40px;
        height: 40px;
        line-height: 40px;
        border: 1px solid red;
        border-radius: 20px;
        background-color: lightcoral;
        display: block;
        margin-left: 20px;
        margin-top: 5px;
    }
    .menu>.fir_menu>li>.sec_menu{
        height: 50px;
        width: 180px;
        border-radius: 25px;
        border: 1px solid grey;
        position: absolute;
        left: 50px;
        top: -80px;
        z-index: 1;
    }
    .menu>.fir_menu>li>.sec_menu::before{
        content: "";
        width: 150px;
        height: 50px;
        background-color: grey;
        border: 1px solid grey;
        border-radius: 25px;
        position: absolute;
        left: -80px;
        top:25px;
        transform: rotate(-60deg);
        z-index: -10;
    }
    .menu>.fir_menu>li>.sec_menu>li{
        float: left;
        position: relative;
        z-index:1;
    }
    .menu>.fir_menu>li>.sec_menu>li>a{
        width: 40px;
        height: 40px;
        line-height: 40px;
        border: 1px solid grey;
        border-radius: 20px;
        background-color: lightgray;
        margin: 4px;
        display: block;
    }
    .menu>.fir_menu>li>.sec_menu>li>.thi_menu{
        height: 50px;
        width: 50px;
        border-radius: 25px;
        background-color: orange;
        position: absolute;
        left: 50px;
        top: -80px;
        z-index: 1;
    }
    .menu>.fir_menu>li>.sec_menu>li>.thi_menu::before{
        content:"";
        width: 150px;
        height: 50px;
        background-color: grey;
        border: 1px solid grey;
        border-radius: 25px;
        position: absolute;
        left: 0px;
        top:28px;
        transform: rotate(30deg);
        z-index: -1;
    }
    .menu>.fir_menu>li>.sec_menu>li>.thi_menu>li>a{
        height: 40px;
        width: 40px;
        border-radius: 20px;
        background-color: lightcoral;
        line-height: 40px;
        display: block;
        margin: 5px;
    }
</style>

< / head >
< body >

<div class="menu">
        <ul class="fir_menu">
            <li><a></a>
                <div></div>
                <ul class="sec_menu">
                    <li>
                        <a href="-sharp">1</a>
                        <ul class="thi_menu"><li><a></a></li></ul>
                    </li>
                    <li><a href="-sharp">2</a></li>
                    <li><a href="-sharp">3</a></li>
                </ul>
            </li>
        </ul>
</div>

< / body >
< / html >

Css

Apr.11,2021

in the upper right corner, I started with the idea of using z_index to solve the coverage problem, but the experiment was not successful. Later, change the HTML structure and put the gray block in front of it to achieve the desired effect. Thank you for your serious answer. With this for the first time, so many kind-hearted people come to answer. I'm so touched. I like it for all of you.