Как сделать выпадающее меню?

Есть навигационное меню для Мобильных разрешений <=1024px.
Меню 3-х уровневое. В 1-ом уровне Каталог имеет стрелочку и выпадающее подменю 2-го уровня.
Далее есть много родительских элементов 2-го уровня по клику на которые выпадает подменю 3-го уровня.

<nav id="menu" class="default">

		<div class="menu_burger"><span></span></div>

		<div class="menu_list">

			<ul>
				<li><a href="">Главная</a></li>
				<li class="catalog_dropdown"><a href="" class="menu_icon"><span class="hamburger hamburger-animate"><span></span><span></span><span></span></span>Каталог</a>

					<ul class="sub_menu">
						<li class="parent"><a href="">Товар номер - 1</a>

							<ul class="sub_sub_menu">
								<li><a href="">Товар номер - 1.1</a></li>
								<li><a href="">Товар номер - 1.2</a></li>
								<li><a href="">Товар номер - 1.3</a></li>
							</ul>

						</li>
						<li class="parent"><a href="">Товар номер - 2</a>
							
							<ul class="sub_sub_menu">
								<li><a href="">Товар номер - 2.1</a></li>
								<li><a href="">Товар номер - 2.2</a></li>
								<li><a href="">Товар номер - 2.3</a></li>
							</ul>

						</li>
						<li><a href="">Товар номер - 3</a></li>
						<li><a href="">Товар номер - 4</a></li>
						<li class="parent"><a href="">Товар номер - 5</a>

							<ul class="sub_sub_menu">
								<li><a href="">Товар номер - 5.1</a></li>
								<li><a href="">Товар номер - 5.2</a></li>
								<li><a href="">Товар номер - 5.3</a></li>
							</ul>

						</li>
					</ul>

				</li>
				<li><a href="">Контакты</a></li>
				<li><a href="">О нас</a></li>
				<li class="is-active"><a href="">Цены</a></li>
				<li><a href="">Доставка</a></li>
				<li><a href="">Оплата</a></li>
			</ul>

		</div>

		<div class="menu_overlay"></div>

	</nav>

В CSS стилях сделал видимым по умолчанию меню 2-го уровня. По клику на стрелочку — закрытие/скрытие этого подменю.

А меню 3-го уровня по умолчанию скрыты. При нажатии на стрелку — под-подменю должно открываться, но в тоже время другие подменю 3-го уровня должны быть либо закрытыми либо должны закрыться, если они были открыты. Соответственно и стрелка должна делать вращение.

Особенностью моей верстки является то, что родительный Пункт списка li имеет ::before. Это и есть стрелочка. А сам li является ссылкой. Ссылку я сместил отступом справа, тем самым освободил место для клика по стрелке.
Разворот меню 3-го уровня и анимация стрелки SVG происходит при клике на элемент li — т.е. на свободное пространство где стрелка.
НО есть минус. При клике на саму ссылку всё равно происходит разворот стрелки (можно успеть заметить)
Как и это исправить в том числе?

Меню 3-го уровня желательно сделать с анимацией открытия/закрытия без использования display:none; например:

/*level-3*/
	.menu_list ul li ul li ul{
		background-color:#c9d1ce;
		visibility:hidden;
		position:absolute;
		opacity:0;
	}
	.menu_list ul li ul li ul.active{
		background-color:#c9d1ce;
		visibility:visible;
		position:relative;
		opacity:1;
	}

Т.е. при клике я обращаюсь:

либо к Каталогу li и прошу его закрыть/открыть:
.catalog_dropdown

либо к родительному пункту li Подменю и прошу открыть/закрыть одно из подменю 3-го уровня.
.menu_list ul li ul>li.parent

с добавлением Класса: .active

Вопрос в том, как будет выглядеть полностью рабочий скрипт для моей верстки. А именно:
1) Чтобы открытие/закрытие Каталога не пересекалось с открытием/закрытием Подменюшек.
2) Чтобы при открытии Подменю 3-го уровня другие открытые — закрывались и стрелки тоже возвращались на свое место само собой (rotare 180). Но при этом сам Каталог не закрывал меню 2-го уровня конечно.
3) И плюсом как исправить переход по ссылке родителя, чтобы действия при нажатии на <a> не приводили к открытиям/закрытиям элементов….
4) Анимация transition:.3s для всех этих действий самом собой.

P.s. Я изначально не стал добавлять лишние элементы и сверстал так. Поэтому прошу помощи.
В скриптах не силен, а JS в интернете не приводят в нужному эффекту, поскольку у каждого из них свои особенности.