Скрыть меню после перехода
 

При наведении курсором на пункт меню открывается большое подменю (не предлагайте переделать, так надо):



Если кликнуть на тот пункт меню, на который навел курсор (КАТАЛОГ), то мы перейдем на страницу каталога, но подменю как было открытым, так и останется, мы ведь не отводили курсор. Это логично.

Но очень не удобно для пользователя, ведь эта "простыня" заслоняет полэкрана и даже не видно, что сменилась страница.
Вопрос: как сделать так, что бы при клике на пункт меню, подменю исчезало? Но при этом мы могли потом снова его вызвать наведением курсора на "КАТАЛОГ".

Почему такой вариант не прокатывает?

Если написать вот такой скрипт:

<script>
function closeSub() {
	var t=document.getElementsByClassName('submenu');
	t.style.display='none';
}
</script>

И потом вызвать его кликом по родительской ссылке:

<a href="/catalog" onclick="closeSub();">