JSFiddle - React, Tailwind, and code Playground

by samizdam

HTML

<nav id="topmenu">
            <ul>
                <li><a class="menu-link">Главная</a></li>
                <li><a class="menu-link">Новости</a>
                    <ul class="drop-bottom">
                        <li><a>Спорт</a></li>
                        <li><a>Бизнес</a></li>
                        <li><a>Город</a></li>
                    </ul>
                </li>
                <li><a class="menu-link">Статьи</a>
                    <ul class="drop-bottom">
                        <li><a>Спорт</a></li>
                        <li><a>Бизнес</a></li>
                        <li><a>Природа</a></li>
                        <li><a>Достижения</a></li>
                        <li><a>Город</a></li>
                    </ul>
                </li>
                <li><a class="menu-link">О нас</a></li>
                <li><a class="menu-link">Связь</a></li>
            </ul>
        </nav>

CSS

#topmenu ul li{
    display: inline;
}
ul.drop-bottom {
    display: none;
    position: absolute;
}

JavaScript

$(document).ready(function() {
    $('#topmenu ul li').hover(
        function(){
            $(this).find('.drop-bottom').fadeIn();
        },function(){
            $(this).find('.drop-bottom').fadeOut();
        }
    );
});