JSFiddle - React, Tailwind, and code Playground

by kpripper

HTML

<li><a id="conteiner2" class="exter" href="/home"> Общая хирургия</a></li>
                        <ul id="conteiner2" class="inner" type="none">
                            <li><a class="inner-link" href="#">Абдоминальная хирургия</a></li>
                            <li><a class="inner-link" href="#">Гепатопанкреатология</a></li>
                            <li><a class="inner-link" href="#">Герниология</a></li>
                            <li><a class="inner-link" href="#">Гнойная хирургия</a></li>
                            <li><a class="inner-link" href="#">Колопроктология</a></li>
                            <li><a class="inner-link" href="#">Микрохирургия</a></li>
                            <li><a class="inner-link" href="#">Политравма</a></li>
                            <li><a class="inner-link" href="#">Ургент</a></li>
                            <li><a class="inner-link" href="#">Фото</a></li>
                        </ul>
                    <li><a class="exter" href="/home"> Торакальная хирургия</a></li>
                    <li><a id="conteiner3" class="exter" href="/home"> Сосудистая и кардиохирургия</a></li>
                        <ul id="conteiner3" class="inner" type="none">
                        <li><a class="inner-link" href="#">Флебология</a></li>
                        </ul>
                    <li><a id="conteiner4" class="exter" href="/home"> Онкология</a></li>
                        <ul class="inner4" type="none">
                        <li><a class="inner-link" href="#">Неотложная онкохирургия</a></li>
                        </ul>

CSS

.inner a{
font-size:11px !important;

}
.inner li {
margin-bottom:-8px;
display: none;
}

.innershow li {
margin-bottom:-8px;
padding-left:20px;
} 


ul.innershow  {
padding-bottom: 10px;
    
}

JavaScript

var razvMenu2 = $('#conteiner2');

razvMenu2.mouseover (function (){
    $('#conteiner2.ul').removeClass('inner').addClass('innershow'); 
     
    
}) 
var razvMenu3 = $('#conteiner3');

razvMenu3.mouseover (function (){
    $('#conteiner3.ul').removeClass('inner').addClass('innershow'); 
     
    
})