JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript">
function toggle_show(id) {
document.getElementById(id).style.display = getStyle(document.getElementById(id),'display') != 'none' ? 'none ':'block' ;
}
//-----
function getStyle(element,CSSProperty)
{ return (typeof getComputedStyle == "undefined" ? element.currentStyle : getComputedStyle(element, null))[CSSProperty];
}

</script>

<ul class="menuleft">
 <li onclick="toggle_show('nom')"><a href="#home">матрасы</a>
                <ul id="nom" style="display: none;">
<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="#">наматрасники</a></li>
</ul>

CSS

.menuleft li {
background: #eee url(../i/leftmenul.png) 0 0 no-repeat;
width: 334px;
height: auto;
overflow: hidden;
display: block;
}

.menuleft li a {
display: inline-block;
height: 43px;
text-transform: uppercase;
font: bold 12px/48px Tahoma;
text-decoration: none;
padding-left: 50px;
margin-left: 6px;
}


.menuleft a:nth-child(1) {
background: #333 url(../i/lmenu/1.png) left center no-repeat; 
}

.menuleft a:nth-child(2) {
background: #vvv url(../i/lmenu/2.png) left center no-repeat !important; 
}

ul#nom {
display: none;
}

#nom li a {
color: #333;
font: normal 12px/26px Tahoma;
display: inline-block;
text-decoration: underline;
text-transform: capitalize;
}

#nom li a {
background: none;
}

#nom li {
background: none;
height: 26px;
}

#nom li a:hover {
color: #1a4598;
}