[Malleys]

Предотвращаем переход по ссылке

<a href="javascript:void(0)"></a>

А зачем тогда ссылка? Это бессмысленно! Используйте кнопку или хотя бы роль кнопки.

А ещё можно использовать :focus-within, хотя смысл немного другой

<style type="text/css">

.had_child:not(:focus-within) .ttnavigation{
	background-color: #FF0000;
}
.had_child:focus-within .ttnavigation{
	background-color: #228B22;
}
.ttnavigation::after {
	content: "span";
	color: #FFFFFF;
}
.had_child:not(:focus-within) > ul {
	display: none;
}
.had_child > a { pointer-events: none; }

</style>

<ul id="ma-mobilemenu" class="mobilemenu originalmenu nav-collapse collapse expand_menu">
	-----------Блок меню 1----------------------
	<li class="had_child" tabindex="0">
		<a role="button">Пункт меню 1 уровня</a>
		<ul>
			<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
			<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
			<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
			<li><a href="#"><span>Иван-чай</span></a></li>
			<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
		</ul>
		<span class="ttnavigation"><a role="button"></a></span>
	</li>

	-----------Блок меню 2----------------------
	<li class="had_child" tabindex="0">
	<a role="button">Пункт меню 1 уровня</a>
		<ul>
			<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
			<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
			<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
			<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
			<li><a href="#"><span>Пункт меню 2 уровня</span></a></li>
		</ul>
		<span class="ttnavigation"><a role="button"></a></span>
	</li>
</ul>