JSFiddle - React, Tailwind, and code Playground

by jwerre

HTML

<ul id="main-menu">
	<li>
		<a href="/parent-topic-one">Parent Topic 1</a>
		<ul>
			<li>
                <a href="/child-topic-one-a">Child Topic 1-A</a>
				<ul>
					<li>
						<a href="/child-topic-two-a">Child Topic 2-A</a>
					</li>
					<li class="selected">
						<a href="/child-topic-two-b">Child Topic 2-B</a>
					</li>
				</ul>
			</li>
			<li>
                <a href="/child-topic-one-b">Child Topic 1-B</a>
            </li>
		</ul>
	</li>
	<li>
		<a href="/parent-topic-two">Parent Topic 2</a>
	</li>
	<li>
		<a href="/parent-topic-three">Parent Topic 3</a>
	</li>
</ul>

CSS

ul {
  margin: 0;
  list-style: none;
}
li {
  margin: 0;
}

ul#main-menu li > ul {
  display: none;
  padding-left: 25px;
}

ul#main-menu li > ul li.selected {
  display: block;
}