JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<ul class='menu'>
    <li class='item'><a href='#'>Введение</a>
    <ul class='hidden_menu'>
        <li>word</li>
        <li>excel</li>
        <li>access</li>
        <li>Практика</li>
    </ul>
    </li>    
</ul>

CSS

.menu, ul{
    list-style:none;
    padding:0;
    text-align:center;
    text-transform:uppercase;
}
a{
    text-decoration:none;
    display:inline-block;
    padding:10px;
    border-top:1px solid #333;
    border-bottom:1px solid #333;
}
.item{
    position:relative;
}
.item .hidden_menu{
    display:none;
    margin-top:20px;
}
.item .hidden_menu li{
    margin:0 20px;
    border-bottom:1px solid #333;
    
}
.item .hidden_menu li{
    display:inline;
}

JavaScript

$('.item a').on('click', function(){
    var menu = $(this).next();
    menu.slideToggle(500) ;
});