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

Question

[Menma91]

Я собственно Js как таковой не начал изучать, на парах немного выбился из графика, а на дворе потребовали менюшку выпадающую на js сделать, нарыл в нете такой код:

$(function(){
$('.menu li').hover(function(){
$(this).children('ul').stop(false, true).fadeIn(200);
},function(){
$(this).children('ul').stop(false, true).fadeOut(200);
});
});

собственно проблема кода в том, что при обновлении страницы, все подпункты отображены под главными пунктами, а после наведения мыши - они пропадают и открываются как положено, но все-равно за главными пунктами. Можете помочь подлатать код, а желательно помочь сделать, что бы открывался список по клику. заранее Спасибо, исходник списка:

<div class="menu">
			
<ul id="menu">
        <li class="menuTitle"><a href="#">Главная</a></li>
        
        <li class="menuTitle"><a href="Films1.html">Фентези</a>
			<ul class="sub">
				<li><a href="#">Подпункт 1</a></li><br>
				<li><a href="#">Подпункт 2</a></li>
				<li><a href="#">Подпункт 3</a></li>
			</ul>
		</li>
	
	<li class="menuTitle"><a href="Films2.html">Триллеры</a>
		<ul class="sub">
			<li><a href="#">Подпункт 2</a></li>
			<li><a href="#">Подпункт 2</a></li>
			<li><a href="#">Подпункт 2</a></li>
		</ul>
	</li>
		
		<li class="menuTitle"><a href="Films3.html">Комедии</a>
			<ul class="sub">
				<li><a href="#">Подпункт 3</a></li>
				<li><a href="#">Подпункт 3</a></li>
				<li><a href="#">Подпункт 3</a></li>
			</ul>
		</li>
</ul>
</div>

в том то и вопрос, я нашел - как сделать по наведению, а хотелось бы по клику, там собственно и функция будет click, только как код оформить правильно, вот это вопрос)) 
Было бы супер, если бы вы подсказали, как на чистом Js написать, но если вы поможете подкорректировать jQuery код, тоже было бы супер. Заранее спасибо.

Comments

[Dark Hole]

тег code, вы не заметили?

[Menma91]

не-а

[Генри]

Во-первых, это jQuery а не чистый JS. Во-вторых, метод hover - это событие при наведении, а не при клике. В третьих, вы html код не прикрепили, возможно вы не поставили вокруг него тег < code >, о котором писали выше. Поставьте, попробуем разобраться.

Answer 1

[Jon Doe]

Добавьте сначала пунктам своим, которые должны выпадать свойство display: none в css и меню не будет сразу выпадать после перезагрузки.

Answer 2

[Menma91]

спасибо, что-то я с этим тупанул, но остается еще 1 маленькая проблема, подменюшки - выпадают, но они выпадают ЗА основным меню, они получается как одно на другом сливаются, а можно бы подкорректировать код, что бы при наведение на пункт меню, подменю выезжало и сдвигало вниз другие пункты меню???