Pokaż/ukryj menu (lista pionowa)

Witam. Mam problem z pokazaniem/ukryciem menu.

Otóż mam taką listę:

<ol>
	<li class="glowna"><a href="#" class="element-w-menu" onClick="pokazUkryj();">Statystyka</a></li>
		<ul id="lista">
			<li><a href="" class="element-w-menu-a">Średnia ważona</a></li>
		</ul>
	<li class="glowna" onClick="pokazUkryj();"><a href="#" class="element-w-menu">Kombinatoryka</a></li>
		<ul id="lista">
			<li><a href="" class="element-w-menu-a">Reguła mnożenia<</li>
		</ul>
</ol>

Oraz napisałem do tego taki skrypcik: 

<script type="text/javascript">
	
	function pokazUkryj()
	{
		var ul = document.getElementById('lista');
		
		if(ul.style.display=="none"){
			ul.style.display = "block";
		}
		else{
			ul.style.display = "none";
		}
	}
</script>

Na pierwszym elemencie w menu (statystyka) działa świetnie. Niestety na drugim elemencie (kombinatoryka) rozwija się podmenu ze statystyki.

Okej, w dokumencie może być tylko jedno ID - rozumiem czemu to nie działa i dlaczego tak się dzieje. Póki co tworzę proste strony i szlifuje bardziej html/css. Js dosłownie tylko liznąłem, dlatego nie potrafię znaleść rozwiązania. Nadanie każdemu elementowi z listy ID i skopiowanie skryptu tyle razy ile elementów - jest to jakieś wyjście, jednakże bardzo nieoptymalne. Czy istnieje jakaś funkcja w JS która pozwoli mi na ukrycie/pokazanie podmenu?