ausklappbare Navigationsleiste - onmouseout

[Simon]

Hallo Leute,

ich tüftle gerade an einer ausklappbaren Navigationsleiste. Ist soweit fertig, mein Problem:
Ich möchte dass Sie ausklappt wenn der Cursor drüber ist und einklappt wenner weg ist.

Dafür hab ich 2 Elemente. Ein div dass immer zu sehen ist und das aufklappbare. Ich hänge also bei onmouseover das zweite unten am ersten hin.

Meine Idee war, dass ich bei onmousout eines divs prüfe, ob der curser auf dem anderen ist.

Allerdings schließt sich das hängende div nicht mehr:
(Lasse ich setTimeout() weg, schließt sich das hängende div sobald ich das erstere verlasse)

			window.onload = function () {  
				  
				// TOP-NAV-LIST SHOW/HIDE  
				var top_nav_onmouseout = true;  
				var top_nav_list_onmouseout = true;  
				  
				document.getElementById('top_navigation').onmouseover = function () {  
					show_element('top_nav_list');  
					top_nav_onmouseout = false;  
				}  
				  
				document.getElementById('top_nav_list').onmouseover = function () {  
					top_nav_list_onmouseout = false;  
				}  
				  
				function check_nav_onmouseout () {  
					if (top_nav_onmouseout && top_nav_list_onmouseout) {  
						hide_element('top_nav_list');  
					}  
				}  
				  
				document.getElementById('top_navigation').onmouseout = function () {  
					top_nav_onmouseout = true;  
					window.setTimeout("check_nav_onmouseout()", 100);  
				}  
				  
				document.getElementById('top_nav_list').onmouseout = function () {  
					top_nav_list_onmouseout = true;  
					window.setTimeout("check_nav_onmouseout()", 100);  
				}  
				  
				document.onclick = function () {  
					hide_element('top_nav_list');  
				}  
				  
				// TOP-NAV-LIST SHOW/HIDE END  
				  
			} // WINDOW ONLOAD END

CSS auszug:

  
  
#top_navigation, #content, #top_nav_list {  
	text-align: left;  
	border: 1px solid #CCC;  
}  
  
#top_navigation {  
	width: 75px;  
	padding: 5px 8px;  
	margin: 0px 15px -1px auto;  
	background-image: url(images/arrow_down_grey.gif);  
	background-repeat: no-repeat;  
	background-position: bottom right;  
}  
  
label, h1, h3, #footer, .top_nav_head {  
	color: #999;  
}  
  
#top_nav_list {  
	padding: 0px;  
	width: 160px;  
	position: absolute;  
	top: 32px;  
	right: 15px;  
	background-color: #FFF;  
	border-style: dashed;  
	visibility: hidden;  
	display: block;  
	z-index: 1;  
}  
  
#top_nav_list ul {  
	list-style-type: none;  
	list-style-position: inside;  
	padding: 0px;  
	margin: 0px;  
}  
  
#top_nav_list li {  
	padding: 8px 8px;  
	width: auto;  
}  

Danke fürs durchlesen