[kostyanet]

Сделано дерево в списках ul li, канонично, в общем. Класс .tree_menu ul - по умолчанию для всех не коренных UL. Класс ul.menu_hide вешается на все некоренные UL и их, соответственно не видно. Разница там только в max-height как видите:

.tree_menu ul {
	max-height: 2000px;
	overflow: hidden;
	background-color:#F0F0F0;
	transition: all 1s ease ;
}

ul.menu_hide {
	max-height: 0px;
	overflow: hidden;
	background-color:#F0F0F0;
}

Кусок хтмля.

<li id="menu4"><a href="#">Категория</a>
	<ul class="menu_hide">
		<li id="menu5"><a href="#">Суб категория</a>
			<ul class="menu_hide">
				<li id="menu6"><a href="url">Продукт1</a></li>
				<li id="menu7"><a href="url">Продукт2</a></li>
			</ul>
		</li>
		<li id="menu8"><a href="#">Суб категория</a>
			<ul class="menu_hide">
				<li id="menu9"><a href="url">Продукт3</a></li>
				<li id="menu10"><a href="url">Продукт4</a></li>
			</ul>
		</li>
	</ul>
</li>

Ява-скрипт развешивает события щелчка и в принципе больше ничего не делает кроме отключения/включения выбранного UL. Поскольку UL выбрать нельзя, он просто находится как parent щелкнутого LI:

var child_ul = find_child_ul(this);
if(child_ul)
	child_ul.classList.toggle('menu_hide');

Так вот, в принципе все работает. Щелкнутый пункт (визуально) раскрывается с анимацией, и скрывается с анимацией но перед закрытием он думает ровно столько, сколько длится анимация. То есть там 1 секунда нарисована, браузер 1 секунду думает прежде чем за следующую секунду свернуть UL с глаз долой.

Вопрос, откуда берется пауза, как ее избежать применительно к представленной структуре, или как вообще это сделать.