JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dssection">
<ul>
<li><a href="#">Каталог</a>
<ul>
<li><a href="/index/0-19">БРС</a>
<ul>
<li><a href="/index/0-20">Камлоки</a>
<ul>
<li><a href="/publ/14-1-0-2">Алюминий</a></li>
<li><a href="/index/0-39">Нержа</a></li>
<li><a href="#">Полипропилен</a></li>
<li><a href="#">Кольца</a></li>
<li><a href="#">Размеры</a></li>
<li><a href="#">Адаптеры</a>
<ul>
<li><a href="#">Под приварку</a></li>
<li><a href="#">Фланцевые</a></li>
<li><a href="#">Подуровень 3</a></li>
<li><a href="#">Подуровень 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Буровые</a></li>
<li><a href="#">Подуровень 3</a></li>
<li><a href="#">Подуровень 4</a></li>
</ul>
</li>
<li><a href="#">Рукава</a>
<ul>
<li><a href="#">Рукава 1</a></li>
<li><a href="#">Рукава 2</a></li>
<li><a href="#">Подуровень 3</a></li>
<li><a href="#">Подуровень 4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

<style>
	.dssection a:not(:only-child)::after {
		content: url(http://gtrad.ucoz.net/arvverh.gif);
		padding: 0 .4em;
		vertical-align: .1em;
	}
	
	.dssection a:not(:only-child).expanded::after {
		content: url(http://gtrad.ucoz.net/arvniz.gif)
	}
	
	.dssection {background: #f3f3f5;padding:0;list-style:none; font-family: verdana,arial,helvetica;}
	.dssection ul{padding: 0;margin: 0;font-size: 11x;line-height: 12px;list-style: none;animation:appear 300ms forwards;}
	.dssection li {;list-style: none;}
	/*menu0*/
	.dssection li a {display: block;line-height: 12px;/*text-indent:5px;*/padding-left: 5px;color:#000;height: 15px;text-decoration: none;font-size: 11px;font-weight: normal;outline:none;}
	.dssection li a:hover {display: block;background: #e6e6e6;text-decoration:none;}
	/*menu-1 */
	.dssection ul ul {background:#fff;/*padding: 10px 0 10px 0*/;}
	.dssection ul ul li {margin: 0;padding: 0;clear: both;}
	.dssection ul ul li a {/* Цвет фона внутри */background: #fff;padding: 0px 0 0 0;height:15px;line-height: 12px;text-decoration: none;/* Цвет текста */color:...