Иконка отображается над блоком, как исправить!

У меня есть меню, при наведении на more-t вылезает блок. Но почему-то иконки, находящиеся в блоке ниже, показываются над ним. Как это исправить? На z-index не реагирует.

    <div class="n">
        <div class="add-icons">
            <div class="done" style="background-image: url(img/wether/done.svg);"></div>
            <div class="more-t" style="background-image: url(img/wether/more-tools.svg);">
                <ul class="menu">
                    
                </ul>
            </div>
            
        </div>
    </div>
    <div class="n1">
        <div class="add-icons">
            <div class="done" style="background-image: url(img/wether/done.svg);"></div>
            <div class="more-t" style="background-image: url(img/wether/more-tools.svg);">
                <ul class="menu">
                    
                </ul>
            </div>
            
        </div>
    </div>
<style>

        .add-icons{
        z-index: 1;
        padding-right: 5px;
        padding-left: 5px;
        width: auto;
        display: inline-block;
        height: auto;
        position: absolute; 
    }
    .done{
        cursor: pointer;
        display: inline-block;
        width: 35px;
        height: 35px;
        background-repeat: no-repeat;
    }
    .more-t{
        z-index: 1;
        display: inline-block;
        cursor: pointer;
        background-repeat: no-repeat;
        width: 35px;
        height: 20px;
        transform: rotate(90deg) translateX(-7px);
        background-position: center;
    }
    .menu{
        display: block;
        list-style: none;
        pointer-events: none;
        transition: opacity 0.3s;
        transform: rotate(-90deg);
        opacity: 0;
        position: absolute;
        background-color: #C4C4C4;
        left: 32px;
        top: -20px;
        width: 60px;
        height: 95px;
        border-radius: 10px;
    }
    .more-t:hover > .menu{
        pointer-events: auto;
        display: block;
        opacity: 1;
    }
    .n1{
        margin-top: 40px;
    }
</style>