JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="my-menu" class="menu">
              <li><a href="#">Rock</a>
                <ul style="display: none;">
                  <li><a href="#">Garage Rock</a>
                    <ul style="display: none;">
                      <li><a href="#">The Hives</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Progressive Rock</a>
                    <ul style="display: none;">
                      <li><a href="#">King Crimson</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li class="selected"><a href="#">Metal</a>
                <ul style="display: block;">
                  <li class="selected"><a href="#">Progressive Metal</a>
                    <ul style="display: block;">
                      <li><a href="#">Opeth</a></li>
                      <li><a href="#">Porcupine Tree</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Groove Metal</a>
                    <ul style="display: none;">
                      <li><a href="#">Pantera</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li class=""><a href="#">Electronica</a>
                <ul style="display: none;">
                  <li><a href="#">Acid</a>
                    <ul style="display: none;">
                      <li><a href="#">Acidwolf</a></li>
                    </ul>
                  </li>
                  <li><a href="#">IDM</a>
                    <ul style="display: none;">
                      <li><a href="#">Aphex Twin</a></li>
                      <li><a href="#">Autechre</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li><a href="#">Pop</a>
                <ul style="display: none;">
                  <li><a href="#">80s</a>
                    <ul style="display: none;">
                     ...

CSS

.menu, .menu ul {
    list-style-type: none;
    margin: 0;
    padding: 10px;
    font-family: "Roboto", sans-serif;
}
.menu>li {
    border-bottom: 1px solid #f1f1f1;
    transition: background-color .5s ease-out;
}
.menu>li:last-child {
    border-bottom: 0;
}
.menu li.in {
    background-color: #fafafa;
}
.menu {
    border: 1px solid gray;
}
.menu>li>a {
    font-weight: bold;
    font-size: larger;
}
.menu a {
    text-decoration: none;
    color: black;
}

JavaScript

$.fn.extend({
    menu: function() {
        $(this)
            .on('click', 'a', function(e) {
                e.preventDefault();
                $(this)
                .find('~ul')
                    .stop()
                    .slideToggle()
                    .parent('li')
                    .toggleClass('in')
                $(this)
                    .parent('li')
                    .siblings()
                    .removeClass('in')
                    .find('ul')
                    .stop().slideUp();
            })
            .find('ul')
                .hide()
    }
});

$('#my-menu').menu();