JSFiddle - React, Tailwind, and code Playground

by certainlyakey

HTML

<nav class="mainmenu">
    <ul>
        <li><a href="/">Главная страница</a></li>
        <li>Наши спонсоры
            <ul>
                <li><a href="http://gm.com">General Motors</a></li>
                <li><a href="http://cocacola.com">Coca Cola</a></li>
                <li><a href="http://damienhirst.com">Hearst Corp.</a></li>    
            </ul>
        </li>
        <li><a href="/about/">О нас</a></li>
        <li><a href="/contacts/">Контакты</a></li>
        
    </ul>
</nav>

CSS

body {font-family: "Trebuchet MS", Verdana, sans-serif; background-color:gray;}

.mainmenu li {float:left; cursor:pointer; list-style:none; text-align:center; padding:20px; }
.mainmenu li, .mainmenu a {color:white; text-decoration:none;}
.mainmenu li li {float:none; padding:0;}
.parent ul {padding:0; padding-top:10px;}
.parent li {text-align:left;}

JavaScript

jQuery(document).ready(function($) {
    $('.mainmenu li:has(ul)').addClass('parent').find('ul').hide();    
    $('.mainmenu .parent').on('click', function() {
        $(this).find('ul').toggle();
    });
});