JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
<ul id="nav">
<div class="navTitle"><p>Школьные принадлежности</p></div>
    <li><a href="#" class="sub" tabindex="1">Бумажно-беловая продукция</a>
            <ul>
            <li><a href="#">Альбомы для рисования</a></li>
            <li><a href="#">Блокноты, записные книжки</a></li>
            <li><a href="#">Бумага цветная, картон</a></li>
            <li><a href="#">Папки для тетрадей и труда</a></li>
            </ul>
    </li>
    <li><a href="#" class="sub" tabindex="1">Настольные принадлежности</a>
        <ul>
            <li><a href="#">Глобусы</a></li>
            <li><a href="#">Калькуляторы карманные</a></li>
        </ul>
    </li>
    <li><a href="#" class="sub" tabindex="1">Офисные принадлежности и инструменты</a>
        <ul>
            <li><a href="#">Клей</a></li>
            <li><a href="#">Ножницы детские</a></li>
            <li><a href="#">Пеналы офисные, боксы</a></li>
        </ul>
    </li>
    <li><a href="#" class="sub" tabindex="1">Принадлежности для делопроизводства</a>
        <ul>
            <li><a href="#">Папки, портфели пластиковые</a></li>

        </ul>
    </li>
    <li><a href="#" class="sub" tabindex="1">Принадлежности для письма,черчения и рисования</a>
        <ul>
            <li><a href="#">Карандаши восковые</a></li>
            <li><a href="#">Карандаши графитные</a></li>
            <li><a href="#">Карандаши механические</a></li>
            <li><a href="#">Карандаши пастельные</a></li>
            <li><a href="#">Карандаши цветные</a></li>
            <li><a href="#">Кисти</a></li>
            <li><a href="#">Краски акварельные</a></li>
            <li><a href="#">Краски для оформительских работ</a></li>
            <li><a href="#">Краски-гуашь</a></li>
        </ul>
    </li>
    <li><a href="#" class="sub" tabindex="1">Рюкзаки, портфели, сумки, пеналы</a>
    <ul>
            <li><a href="#">Пеналы секционные</a></li>
            <li><a href="#">Пеналы-кошельки</a></li>
            <li><a...

CSS

.navTitle{
	padding: 10px;
	background: #4b9342;

}
.navTitle p{font-size: 16px; font-weight: bold; color: #fff;}
#nav {
	margin: 15px 0 10px 10px;
    border:2px solid #4b9342;
    box-shadow:2px 2px 8px #000000;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
#nav, #nav ul {
    list-style:none;
    padding:0;
    width:200px;
}
#nav ul {
    position:relative;
    z-index:-1;
}
#nav li {
    position:relative;
    z-index:100;
}
#nav ul li {
    margin-top:-23px;

    -moz-transition:  0.4s linear 0.4s;
    -ms-transition: 0.4s linear 0.4s;
    -o-transition: 0.4s linear 0.4s;
    -webkit-transition: 0.4s linear 0.4s;
    transition: 0.4s linear 0.4s;
}
#nav li a {
    background-color:#fff;
    color:#000;
    display:block;
    font-size:14px;
    font-weight:bold;
    line-height:30px;
    outline:0;
    padding-left:10px;
    text-decoration:none;
    border-bottom: 1px solid #4b9342;
}


#nav li a img {
    border-width:0px;
    height:24px;
    line-height:28px;
    margin-right:8px;
    vertical-align:middle;
    width:24px;
}
#nav li a:hover {
    color: #4b9342;
}
#nav ul li a {
	padding-left: 20px;
    background-color:#eee;
    border-bottom:1px solid #ccc;
    color:#000;
    font-size:12px;
    line-height:22px;
}
#nav ul li a:hover {
    background-color:#ddd;
    color:#444;
}


#nav a.sub:focus {
    color: #4b9342;
    outline:0;
}
#nav a:focus ~ ul li {
    margin-top:0;

    -moz-transition:  0.4s linear;
    -ms-transition: 0.4s linear;
    -o-transition: 0.4s linears;
    -webkit-transition: 0.4s linears;
    transition: 0.4s linear;
}
#nav a:focus + img, #nav a:active + img {
    display:block;
}
#nav a.sub:active {
    
    outline:0;
}
#nav a:active ~ ul li {
    margin-top:0;
}
#nav ul:hover {
    display:block;
}