JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
<p>Collapsing:</p>
<ul class="collapsable">
	<li>a<ul>
		<li>a1
		<li>a2
		</ul>
	<li>b<ul>
		<li>b1
		</ul>
</ul>
<p>Not collapsing:</p>
<ul>
	<li>a<ul>
		<li>a1
		<li>a2
		</ul>
	<li>b<ul>
		<li>b1
		</ul>
</ul>
</nav>

CSS

nav li:hover {
    background: #EEEEEE;
}
nav li>ul {
    display: inline-block;
    margin: 0;
    padding: 0;
}
nav .collapsable li>ul {
    display: none;
}
nav li>ul::before {
    content: ": { ";
}
nav li>ul::after {
    content: " } ";
}
nav li:hover>ul {
    display: inline-block;
}
nav li>ul>li {
    display: inline-block;
}
nav li>ul>li+li::before {
    content: ", ";
}