JSFiddle - React, Tailwind, and code Playground

by Ticcix

HTML

<nav role="navigation">
    <a href="">Пункт 1</a>
    <a href="">Пункт 2</a>
    <a href="">Пункт 3</a>
    <p role="button">Пункт 4</p>
    <ul>
        <li><a href="">Подпункт 1</a></li>
        <li><a href="">Подпункт 1</a></li>
    </ul>
    <a href="">Пункт 5</a>
    <a href="">Пункт 6</a>
    <p role="button">Пункт 7</p>
    <ul>
        <li><a href="">Подпункт 1</a></li>
        <li><a href="">Подпункт 1</a></li>
    </ul>
</nav>

CSS

nav {
    width:235px;
    border:1px solid #ccc;
    background:#fff;
    font-size:12px;
    font-family:Arial;
}
nav p,
nav a {
    display:block;
    line-height:30px;
    padding-left:30px;
    cursor:pointer;
    background:url(http://duchesne.ru/templates/primary/images/vmenu.png) no-repeat -1px -60px;
    text-decoration:none;
}
nav a {
    color:#46555a;
}
nav a:hover {
    color:#000;
    background-position:-1px -30px;
}
nav p {
    color:#fff;
    background:url(http://duchesne.ru/templates/primary/images/vmenu.png) no-repeat -1px 0;
}
nav p:hover {
    background-position:-1px -120px;
}
nav p.active {
    background-position:-1px -90px;
}
nav ul {
    list-style:none;
    display:none;
    padding:4px;
    font-size:11px;
}
nav ul li a {
    background:none;
    background:url(http://duchesne.ru/templates/primary/images/list.gif) no-repeat 10px 50%;
    line-height:22px;
    border-bottom:1px dotted #d1dee3;
    color:#2d7d9c;
}
nav ul li a:hover {
    color:#fff;
    background:#5db7da;
}

JavaScript

$(document).on('click','p[role=button]', function(){

	$(this).next('ul').slideToggle(300).siblings('ul').slideUp('slow');
	$(this).toggleClass('active').siblings('p').removeClass('active');

});