JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="left-global-menu">
    
    <li class="left-global-menu-item">
        <span class="left-global-menu-title">ffffff</span>
        <ul class="left-global-menu-links">
            <li>Тестирование меню</li>
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
            <li><a href="#">Что КАСКО?</a></li>
            <li><a href="strikegame.ru">тест</a></li>
            <li><a href="#" class="signout">ТЕСТЫ</a></li>
            
        </ul>
    </li>
        <li class="left-global-menu-item">
       <span class="left-global-menu-title">КАСКО</span>
        <ul class="left-global-menu-links">
            <li>Тестирование меню</li>
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
            <li><a href="#">Что КАСКО?</a></li>
            <li><a href="strikegame.ru">тест</a></li>
            <li><a href="#" class="signout">ТЕСТЫ</a></li>
        </ul>
    </li>
        <li class="left-global-menu-item">
       <span class="left-global-menu-title">КАСКО</span>
        <ul class="left-global-menu-links">
            <li>Тестирование меню</li>
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
            <li><a href="#">Что КАСКО?</a></li>
            <li><a href="strikegame.ru">тест</a></li>
            <li><a href="#" class="signout">ТЕСТЫ</a></li>
        </ul>
    </li>
</ul>

CSS

.left-global-menu, .left-global-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.left-global-menu-item{
    margin-bottom: 0.5em;
    width: 200px;
    overflow:hidden;
}

.left-global-menu-title{
    display: block;
    padding: 10px;
    background: url('http://nevskiycu.ru/left-button.png');
    border-radius:0.5em 0.5em 0.1em 0.1em;
    height: 40px;
    color: #3964ac;
    font-family: 'Trebuchet MS';
    font-size: 24px;
    text-shadow: 1px 1px 1px #fff;
    line-height: 40px;
    position:relative;    
}


.left-global-menu-links {
    margin: -3px 0 0 0 !important;
    padding:5px 0 0 0 !important;
    display: none;
    font-size: 1em;
    background: #3964ac;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    text-shadow: none;
    cursor: default;
    text-decoration: none;
    font-family: 'Trebuchet MS';
    background: #274472;
background: -moz-linear-gradient(top,  #274472 0%, #3964ac 20px, #3964ac 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#274472), color-stop(20px,#3964ac), color-stop(100%,#3964ac));
background: -webkit-linear-gradient(top,  #274472 0%,#3964ac 02px,#3964ac 100%);
background: -o-linear-gradient(top,  #274472 0%,#3964ac 20px,#3964ac 100%);
background: -ms-linear-gradient(top,  #274472 0%,#3964ac 20px,#3964ac 100%);
background: linear-gradient(to bottom,  #274472 0%,#3964ac 20px,#3964ac 100%);

 
}

.left-global-menu-links a:hover {
    text-decoration: underline;
}
.left-global-menu-links a {
    color: #fff;
    text-decoration: none;
}

.left-global-menu-links li {
    padding: 5px 10px
        
}

.left-global-menu>li>ul>.menu_left-top {
position: absolute;
list-style: none;
top: -3px;
left: 0px;
z-index: 0;
padding: 0px;
width: 100%;
height: 24px;
border: solid 1px #345996;
border-bottom: none;
border-left: none;
border-right: none;
background-color: #4975bf;
background: -webkit-linear-gradient(top,bottom,#223e6e,rgba(57,100,172,0.4));
background:...

JavaScript

$(document).ready(function() {
  // when mouse is over or out UL, apply slideToggle
  $('.left-global-menu-item').hover(function() {
    $(this).find('.left-global-menu-links').slideToggle('slow');
  });
});