А так работает???
<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;
