Javascript-форум - Выпадающее меню(неправильно назначает обработчик события)

Вот хочу написать выпадющее меню без jquery, чтоб меню не сразу скрывалось, а через промежуток времени.
Хочу чтоб все выглядело так:
1)Функция search_elem, искала элементы LI, у которых присутствует узел UL, и вызывала функцию assign_event
2)Функция assign_event - эта функция должна вешать обработчик события на элементы и останавливать всплытие(вызовом функции stop_bubbling).
3)Функция stop_bubbling, думаю здесь все понятно.

Вот начал писать код, и столкнулся с проблемой. Почему-то функция assign_event, вешает события не только на нужный элемент, но и на всех его потомков, я никак немогу это прекратить, всплытие получается убирать, а это нет.

По идеи при наведение в моем коде на элемент имеющий потомка ul, должно появляться сообщение (alert). Но оно появляется на всех.

Вот код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Menu</title>
<script type="text/javascript">

[JS]var menu_id = "navbar";

var speed_show = 50;
var speed_hide = 1000;

function search_elem() {
	var elem = document.getElementById(menu_id).getElementsByTagName("li");
	
	for(i in elem) {
		var list = elem[i].childNodes;
		
		//alert(elem[i].nodeName);
		
		for(a in list) {
			if(list[a].nodeName == "UL") {
				//alert(list[a].nodeName);
				assign_event(elem[i], list[a]);
			}
		}
	}
}

function assign_event(elem, list) {
	elem.onmouseover = function() {
		//alert(list.nodeName);
		//list.style.display = "block";
		
		alert("yes");
		stop_bubbling();
	}
		
	//elem.onmouseout = start_hide;
}



function stop_bubbling(event) {
    event = event || window.event;
 
    if (event.stopPropagation) event.stopPropagation();
    else event.cancelBubble = true;
}

onload = search_elem;
[/JS]
</script>

<style type="text/css">
#navbar, #navbar ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
#navbar li {
	float: left;
}
#navbar a {
	background: #999999;
	color: #FFFFFF;
	display: block;
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	padding: 5px;
	cursor: pointer;
}
#navbar a:hover { 
	color: #E2144A;
	background: #CCCCCC; 
}
/*styles for sub-navbar*/ 
#navbar ul {
	display: block;
	position: absolute;
	width: 150px;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
#navbar ul li {
	float: none;
}
#navbar ul a {
	background: #666666;
	padding: 3px;
}
#navbar ul ul {
	margin-top: -19px;
	margin-left: 150px;
}
</style>
</head>
<body>
<div>
<ul id="navbar">
  <li><a hover="#">home</a></li>
  <li><a hover="#">service</a>
    <ul>
      <li><a href="#">php</a></li>
      <li><a href="#">java script</a>
        <ul>
          <li><a href="#">jQuery</a></li>
          <li><a href="#">asp.net</a>
            <ul>
              <li><a hover="#">web-design</a></li>
              <li><a hover="#">web-codding</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">jsp</a></li>
      <li><a href="#">xhtml</a></li>
    </ul></li>
  <li><a hover="#">buy</a></li>
  <li><a hover="#">about us</a></li>
  <li><a hover="#">contacts</a></li>
</ul>
</div>