onmouseover hide/show menu not working in IE6

[alxklo]

I have developed an image based menu with a combination of zeldman's image-matrix css trick and a tiny bit of javascript. The css is working fine across browser's and platforms (I test firefox, safari, opera, and IE). However, the javascript will not work in IE. The function is not a problem in any of the other browsers.

All help and suggestions greatly appreciated, code below:

javascript:

// really simple sub-menu hide/show
function hideShow(element){
		this.href = "javascript:hideShow(" + element + ");";
	if (document.all) {
		var e = document.getElementById(element);
		if (e.className == 'hide' || e.style.display == 'none'){
		
		if (document.all){
		switch(element) {
			case 'aboutMenu':
				hide('booksMenu');
				hide('newsMenu');
				hide('eventsMenu');
				hide('communityMenu');
				break;
			case 'booksMenu':
				hide('aboutMenu');
				hide('newsMenu');
				hide('eventsMenu');
				hide('communityMenu');
				break;
			case 'newsMenu':
				hide('aboutMenu');
				hide('booksMenu');
				hide('eventsMenu');
				hide('communityMenu');
				break;
			case 'eventsMenu':
				hide('aboutMenu');
				hide('booksMenu');
				hide('newsMenu');
				hide('communityMenu');
				break;
			case 'communityMenu':
				hide('aboutMenu');
				hide('booksMenu');
				hide('newsMenu');
				hide('eventsMenu');
				break;
			}
			}
			
		e.className = 'show';
		e.style.display = 'block';
	
		//window.setTimeout("hide('" + element + "')", 8000);
	
	} 
	
	} else if (document.getElementById) {
	
		var e = document.getElementById(element);
		if (e.className == 'hide' || e.style.display == 'none'){
		
		switch(element) {
			case 'aboutMenu':
				hide('booksMenu');
				hide('newsMenu');
				hide('eventsMenu');
				hide('communityMenu');
				break;
			case 'booksMenu':
				hide('aboutMenu');
				hide('newsMenu');
				hide('eventsMenu');
				hide('communityMenu');
				break;
			case 'newsMenu':
				hide('aboutMenu');
				hide('booksMenu');
				hide('eventsMenu');
				hide('communityMenu');
				break;
			case 'eventsMenu':
				hide('aboutMenu');
				hide('booksMenu');
				hide('newsMenu');
				hide('communityMenu');
				break;
			case 'communityMenu':
				hide('aboutMenu');
				hide('booksMenu');
				hide('newsMenu');
				hide('eventsMenu');
				break;
			}
			
		e.className = 'show';
		e.style.display = 'block';
		
		//window.setTimeout("hide('" + element + "')", 8000);
	
	} 
	}
}

function hide(element){
   	var e = document.getElementById(element);
   	e.className = 'hide';
	e.style.display = 'none';
}

html

	<ul id="topNav">
		<li id="about">
			<a href="#" onmouseover="hideShow('aboutMenu');" onblur="hide('aboutMenu');">About</a>	
			<ul id="aboutMenu" class="hide" style="display: none;">
				<li id="bio"><a href="#" title="Bio">Bio</a></li>
				<li id="aboutVI"><a href="#" title="About V.I.">About V.I.</a></li>
				<li id="links"><a href="#" title="Links">Links</a></li>
			</ul>
		</li>
		<li id="books">
			<a href="#" onmouseover="hideShow('booksMenu');" onblur="hide('booksMenu');">Books</a>
			<ul id="booksMenu" class="hide" style="display: none;">
				<li id="novels"><a href="#" title="Novels">Novels</a></li>
				<li id="shortStories"><a href="#" title="Short Stories">Short Stories</a></li>
				<li id="essays"><a href="#" title="Essays">Essays</a></li>
			</ul>
		</li>
		<li id="news">
			<a href="#" onmouseover="javascript:hideShow('newsMenu');" onblur="hide('newsMenu');">News</a>
			<ul id="newsMenu" class="hide" style="display: none;">
				<li id="current"><a href="#" title="Current">Current</a></li>
				<li id="archives"><a href="#" title="Archives">Archives</a></li>
				<li id="pressRoom"><a href="#" title="Press Room">Press Room</a></li>
			</ul>
		</li>
		<li id="events">
			<a href="#" onmouseover="javascript:hideShow('eventsMenu');" onblur="hide('eventsMenu');">Events</a>
			<ul id="eventsMenu" class="hide" style="display: none;">
				<li id="tourInfo"><a href="#" title="Tour Info">Tour Info</a></li>
				<li id="other"><a href="#" title="Other">Other</a></li>
				<li id="photos"><a href="#" title="Photos">Photos</a></li>
			</ul>
		</li>
		<li id="community">
			<a href="#" onmouseover="javascript:hideShow('communityMenu');" onblur="hide('communityMenu');">Community</a>
			<ul id="communityMenu" class="hide" style="display: none;">
				<li id="FAQs"><a href="#" title="FAQs">FAQs</a></li>
				<li id="discussion"><a href="#" title="Discussion">Discussion</a></li>
				<li id="newsletter" title="Newsletter"><a href="#">Newsletter</a></li>
				<li id="podcast"><a href="#" title="Podcast">Podcast</a></li>
			</ul>
		</li>
	</ul>