SOURCE

<div class="nav">
    <div class="common">
        <span class="s1">a</span>
        <span>
            <a href="#">x</a>
            <a href="#">y</a>
        </span>
        <span>
            <a href="#">y</a>
            <a href="#">y</a>
        </span>
    </div>
    <div class="common">
        2
    </div>
    <div class="common">
        3
    </div>
</div>


<style>
    .nav{
        display:flex;
        max-width:300px;
        min-Width:100px;
        border:1px solid;
        height:600px;
        flex-direction:column;

    }
    .common{
        flex:1;
        display:flex;
        background:skyblue;
        border:2px solid #fff;
        text-align:center;
    }
    .common span{
        flex:1;
        display:flex;
        background:pink;
        
        flex-direction:column;
    }
    .common span a{
        flex:1;
        align-items:center;
    }

    .common span:nth-child(-n+2){
        border-right:1px solid #fff;
    }
    .common span a:nth-child(1){
        border-bottom:1px solid #fff;
    }
    .s1{
        border:0;
    }
    
    
</style>