Javascript-форум - Помогите разобраться с меню

А так работает???

<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)
	}
</style>
<script>
	
	Array.from(document.querySelectorAll(".dssection a + ul")).forEach(function(element) {
		element.hidden = true;
	});

	document.addEventListener("click", function(event) {
		if(event.target.matches(".dssection a") && event.target.nextElementSibling.tagName === "UL") {
			event.preventDefault();
			event.target.nextElementSibling.hidden = !event.target.nextElementSibling.hidden;
			event.target.classList.toggle("expanded", !event.target.nextElementSibling.hidden);
		}
	});
	
</script>

UPD
Вместе со стилями из 1-го поста
https://jsfiddle.net/b9Luk1td/

И удалите на сайте в файле my.css на 408 строке display: none;