JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript">
function toggle_show(id) {
        document.getElementById(id).style.display = document.getElementById(id).style.display == 'none' ? 'block' : 'none';

}
</script>

<ul class="menuleft">
 <li onClick="toggle_show('nom')"><a href="#home">ОБУВЬ</a>
                <ul id="nom">
<li><a href="#">Ботинки</a></li>
<li><a href="#">Кеды</a></li>
<li><a href="#">Кроссовки</a></li>
<li><a href="#">Спортивные</a></li>
</li>
                </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>
</ul>

CSS

ul.menuleft {
background: #ededed url(../i/leftmenu.png) left bottom no-repeat;
padding-bottom: 20px;
position: relative;
z-index: 1;
}

.menuleft li {
padding-left: 10px;
line-height: 30px;
text-indent: 2px;
}

.menuleft li a {
font: 17.93px/16.94px MyriadPro-Cond;
color: #4e4e4e;
text-decoration: none;
text-transform: uppercase;
}

.menuleft li:first-child {
padding-top: 15px;
}

ul#nom {
   display: none;
margin-top: -4px;
margin-bottom: 12px;
}

#nom li a {
font: 11.96px/24px Arial;
background: url(../i/lileft.png) center left no-repeat;
padding-left: 8px;
text-transform: capitalize;
margin-left: 4px;
text-indent: 0;
}

#nom li {
background: url(../i/border.png) 100% 100% no-repeat;
width: 155px;
height: 23px;
padding: 0;
text-indent: 0;
padding-bottom: 4px;
}