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 {
   position: relative;
     padding-right: 10px; 
}

.left_menu li a {
    display: block;
    background: #fff url(arrow_left.png) no-repeat 225px 2px;
    font-weight: bold;
    text-decoration: underline;
    padding: 10px;
    cursor: pointer;
    border: 1px #494949 solid;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    margin: 10px 0;
}
.left_menu li:hover ul {
    display: block;
}
.left_menu .down {
    position: absolute;
    z-index: 10;
    background: #CCC;
    display: none;
    left: 100%;
    padding: 5px 25px;
    top: 0;
    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;
}