JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<nav id="menuVertical">
    <ul>
        <li><a href="#m1">Первая услуга</a></li>
        <li><a href="#m2">Вторая услуга</a>
            <ul>
                <li><a href="#m2_1">Выпадашка 1</a></li>
                <li><a href="#m2_2">Выпадашка 2</a></li>
            </ul>
        </li>
        <li><a href="#m3">Третья</a>
            <ul>
                <li><a href="#m3_1">Выпадашка с третьей услуги 1</a></li>
                <li><a href="#m3_2">Выпадашка с третьей услуги 2</a></li>
                <li><a href="#m3_3">Краткая выпадашка</a></li>
            </ul>
        </li>
        <li><a href="#m4">4 услуга</a></li>
        <li><a href="#m5">5 услуга</a>
            <ul>
                <li><a href="#m5_1">111111</a></li>
                <li><a href="#m5_2">2222 2222</a></li>
            </ul>
        </li>
        <li><a href="#m6">6 услуга</a></li>
        <li><a href="#m7">7 услуга</a></li>
        <li><a href="#m8">8 услуга</a></li>
    </ul>
</nav><!--menuVertical-->

CSS

#menuVertical{width:30%;height:auto;}
    #menuVertical ul{
        display:block;
        width:100%;
        height:auto;
        margin:0px;
        padding:0px;
        list-style:none;
        position:relative;
    }
        #menuVertical ul li{display:block; width:100%; height:auto; position:relative;}
            #menuVertical ul li a{
                position:relative;
                display:block;
                width:100%;
                height:auto;
                box-sizing:border-box;
                font-size:13px;
                text-transform:uppercase;
                font-weight:bold;
                color:#FBF7F7;
                line-height:1.2em;
                padding:10px 15px;
                background:#3A9CD3;
                border-top:1px solid #236A92;
                text-decoration:none;
            }
            #menuVertical ul  li:first-child a{border:0px;}
            #menuVertical ul li a:hover, #menuVertical ul li:hover a{
                background:#0A3CC1;
            }
            #menuVertical ul li ul{
                position:absolute;
                top:0px;
                left:100%;
                display:none;
                width:auto;
            }
            /*******показываем выпадашку при наведении ********/
            #menuVertical ul li:hover ul{display:block;}
                #menuVertical ul li ul li a{
                    white-space:nowrap;
                    text-transform:none;
                    padding:5px 20px;
                }
                    #menuVertical ul li ul li a:hover{
                        background:#75C1D4;
                        color:#0A3CC1;
                    }