JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
<li><a href="#">cat1</a><ul class="jaccordion">
<li><a href="#">cat1.1</a><ul class="jaccordion"></ul></li>
<li><a href="#">cat1.2</a><ul class="jaccordion">
<li><a href="#">cat1.2.1</a><ul class="jaccordion">
<li><a href="#">cat1.2.1.1</a><ul class="jaccordion"></ul></li></ul></li></ul></li>
<li><a href="#">cat1.3</a><ul class="jaccordion"></ul></li>
</ul></li>
<li><a href="#">cat2</a><ul class="jaccordion">
<li><a href="#">cat2.1</a><ul class="jaccordion"></ul></li></ul></li>
</ul>

CSS

#nav, #nav ul {
    line-height: 1.5em;
    list-style:none;
    margin: 0;
    padding: 0;
    position: relative;
}

#nav a:link, #nav a:active, #nav a:visited {
    background-color: #333333;
    border: 1px solid #333333;
    color: #FFFFFF;
    display: block;
    padding: 0 5px;
    text-decoration: none;
}

#nav a:hover {
    background-color: #FFFFFF;
    color: #333333;
}
#nav li {
    position: relative;
    width: 80px;
}

#nav ul {
    display: none;
    left: 100%;
    position: absolute;
    width: 192px;
    top:0;
}

#nav li:hover > ul{
     display:block;   
}