Mini DropDown Menu

Hello, i want to do own mini dropdown menu. I coded simple something.

<script type="text/javascript">
	var sit = 0;
	function collapse() {
		if (sit == 0) {
			document.getElementById('submenu').style.visibility = 'visible';
			document.getElementById('submenu').style.height = 'auto';
			sit = 1;
		}
		else if (sit == 1) {
			document.getElementById('submenu').style.visibility = 'hidden';
			document.getElementById('submenu').style.height = '5px';
			sit = 0;
		}
	}
</script>
<div><a href="#" onclick="collapse()">Cat 1</a></div>
<div id="submenu" style="visibility: hidden; height:0px">
SubCat 1<br>
SubCat 2<br>
SubCat 3<br>
SubCat 4<br>
SubCat 5<br>
</div>
<div>Cat 2</div>

Code (markup):

It works in Mozilla Firefox & Google Chrome but doesn't work IE7. How can i fix this problem ?

Regards.

 

Instead of .visibility try .display = 'none' and .display = ''

 

Problem isn't about visibility, it is height. Hiding element is working all browser but IE doesn't support <div id="submenu" style="visibility: hidden; height:0px"> statement.

 

If you will add visibility hidden then it hides the element, but it still takes up space in the layout. So try Display none ..

In displa none you dont need to set height to 0 or 5px.