JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left_menu_block">
<p class="title"> <span> Каталог продукции </span> </p>
<ul class="left_menu">
<li><a href="suhkat.php">Сухие строительные смеси</a> 
    <ul class="down">
    <li>Штукатурки</li>
    <li>Шпаклевки</li>
    <li>Клеи</li>
    <li>Наливные полы</li>
    <li>Смеси для пола</li>
    <li>Затирка для плитки</li>
    </ul>
    </li>
<li><a href="gips.php">Гипсокартон</a>
    <ul class="down">
    <li>ГКЛ, ГВЛ </li>
    <li>Профили и крепежные изделия</li>
    </ul>
</li>
<li><a href="balyasini.php">Балясины</a></li>
<li><a href="gidroizol.php">Гидроизоляционные материалы</a>
    <ul class="down">
    <li>Рулонно-битумные материалы</li>
    <li>Битумная мастика</li>
    <li>Гибкая черепица Shinglas</li>
    </ul>
</li>
<li><a href="utepliteli-glav.php">Утеплители</a>
    <ul class="down">
    <li>Утеплитель из пенополистирола</li>
    <li>Утеплитель на основе минеральной ваты</li>
    <li>Утеплитель на основе каменной ваты</li>
    </ul>
    </li>
<li><a href="ruch-instr.php">Ручной инструмент</a></li>
<li><a href="pod-oboi.php">Обои</a>
    <ul class="down">
    <li> Стеклообои </li>
    <li> Виниловые обои под покраску  </li>
    </ul>
</li>
<li><a href="lak-glav.php">Лакокрасочная продукция</a>
    <ul class="down">
    <li> Грунтовки </li>
    <li> Лаки и Краски </li>
    </ul>
</li>
<li><a href="pena-montajnaya.php">Пена монтажная,герметики</a></li>
<li><a href="metizy.php">Метизы</a></li>
<li><a href="armirujuwie_materialy.php">Армирующие материалы</a></li>
<li><a href="kirpich.php">Кирпич и стеновые материалы</a>
    <ul class="down">
    <li>Кирпич</li>
    <li>Стеновые материалы </li>
    </ul>
</li>
</ul>
</div>

CSS

.left_menu_block {
    padding:10px;
    width:300px;
}
.left_menu_block .title {text-align:center; font-size:1.5em; color:#000;}
.left_menu_block .title span {padding:2px; border-bottom:1px #000 dashed;}
.left_menu {list-style:none; padding:10px;}
.left_menu  li {
    padding:10px;
    cursor:pointer;
    background-color:#fff;
    border:1px #494949 solid;
    border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;
    margin:10px 0;
    z-index:9999;
    }
.left_menu li:hover { position:relative;}
.left_menu li a {display:block; background:url(arrow_left.png) no-repeat 225px 2px; font-weight:bold; text-decoration:underline;}
.left_menu .down  { position:absolute; background:#CCC; display:none; left:288px; padding:5px 25px; top:0px; background:#CCC; list-style:none; border-radius:10px;}
.left_menu .down li {background:url(d_icon_menu.png) no-repeat 0 center; padding:5px 15px; border-radius:0; border:0;}

JavaScript

$(function() {
    $(".left_menu li").hover(function(){
         $(this).find(".down").show(); 
        }, function() {
            $(this).find(".down").hide();
            }
        );
});