JSFiddle - React, Tailwind, and code Playground

by kamaz6141

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>
                    </ul>
                </li>
                <li><a class="menu-link">О нас</a></li>
                <li><a class="menu-link">Связь</a></li>
            </ul>
        </nav>

CSS

#topmenu{
    width:940px;
    margin:0 auto;
    border:1px solid #dfdfdf;
    height: 70px;
    background: #ececec;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    overflow: hidden;
}
    #topmenu .drop-bottom{
        position: absolute;
        display: none;
    }
    #topmenu ul li{display: inline;}
    #topmenu .menu-link{
        display: inline-block;
        padding: 12px 9px;
        cursor: pointer;
        background: #6a6a6a;

    }

JavaScript

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