<div onmouseover="menushow('1');" onmouseout="menuhide('1');" style="float: left; width: 50%;">
			<div class="navhead">информация</div>
			
			<div id="navbody1">
				<a href="http://wartix.net/info/about/">о проекте</a><br />
				<a href="http://wartix.net/info/contacts/">контакты</a><br />
				<a href="http://wartix.net/info/sitemap/">карта сайта</a>
			</div>
			
		</div>
		
		<div onmouseover="menushow('2');" onmouseout="menuhide('2');">
			<div class="navhead">сервисы</div>
			
			<div id="navbody2">
				<a href="http://wartix.net/text2bin/">text2bin</a><br />
				<a href="http://wartix.net/passgen/">passgen</a><br />
				<a href="http://wartix.net/domaincc/">domaincc</a>
			</div>
			
		</div>

Первому блоку было присвоено имя navbody1, а второму — navbody2. Для каждого раздела при наведении мыши на элемент и при уходе с элемента вызывается функция JS.

Стоит также добавить пару строк на CSS. Для этих блоков указано свойство visibility: hidden. Также я указываю курсор "pointer", чтобы пользователь, у которого отключена поддержка JavaScript, понял, что это — не просто заголовок, а здесь скрывается блок навигации.

		<style type="text/css">		
			.navhead {font-weight: bold; background-color: #f5f7f7; cursor: pointer;}
			#navbody1, #navbody2 {visibility: hidden;}
		</style>

Главная составляющая этого проекта — код на JavaScript:

		<script language="javascript" type="text/javascript">
		//<!--
		//<![CDATA[
			function menuhide(menunum)
			{
				var currentmenu = document.getElementById("navbody" + menunum);
				currentmenu.style.visibility = 'hidden';
			}

			function menushow(menunum)
			{
				var currentmenu = document.getElementById("navbody" + menunum);
				currentmenu.style.visibility = 'visible';
			}
		//]]>
		//-->
		</script>