JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <div class="container">
            <nav>
                <ul class="menu style2">
                    <li><a href="#" class="active"><span>дизайн</span></a></li>
                    <li class="sub"><span>страницы</span>
                        <ul class="sub_m">
                            <li><a href="#"><span>Об авторе</span></a></li>
                            <li class="sub"><span>Редакторы</span>
                                <ul>
                                    <li><a href="#"><span>Главный копирайтер</span></a></li>
                                    <li class="sub"><span>Участники</span>
                                        <ul>
                                            <li><a href="#"><span>Об авторе</span></a></li>
                                            <li><a href="#"><span>Редакторы</span></a></li>
                                            <li><a href="#"><span>О сайте</span></a></li>
                                            <li><a href="#"><span>Для пользователей</span></a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#"><span>Расписание</span></a></li>
                                    <li><span>Идет набор</span></li>
                                </ul>
                            </li>
                            <li><a href="#"><span>О сайте</span></a></li>
                            <li><a href="#"><span>Для пользователей</span></a></li>
                        </ul>
                    </li>
                    <li class="sub"><span>Наши работы</span>
                        <ul>
                            <li><a href="#"><span>Об авторе</span></a></li>
                            <li><span>Редакторы</span>
                                <ul>
                                    <li><a href="#"><span>Об авторе</span></a></li>
                                    <li><a...

CSS

*{
    margin: 0;
    padding: 0;
    border: 0;
}

ol,
ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.container {
    font-family: 'Open Sans', 'Arial', sans-serif;
    font-size: 12px;
    width: 100%;
    margin: 0 auto;
    max-width: 700px;
}

.menu > li {
    float: left;
    position: relative;
}

.menu span {
    cursor: default;
    display: block;
    padding: 16px 25px;
    background: #404853;
    text-transform: uppercase;
    color: #a3b0c1;
}

.menu span:hover {
    background: #e5526f;
    color: white;
}
.menu ul ul span {
    background: #5a616b;
}
.menu ul ul ul span {
    background: blue;
}
.menu ul {
    display: none;
    width: 220px;
}
.sub_m  {
    position: absolute;
}
.menu ul li {
    position: relative;
}
.style1 li:hover > ul {
    display: block;
}
.style1 ul ul {
    position: absolute;
    top: 0;
    left: 100%;
}
.style2 li:hover>.sub_m {
    display: block;
}

.style2 ul .sub::before {
    cursor: pointer;
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    right: 10px;
    top: 10px;
    background: rgba(255, 255, 255, 0.3);
}
.open ul {
    display: block;
}

JavaScript

$('.style2 .sub').click(function(){
	$(this).children('ul').slideDown()
});