не работает li.onmouseout = hide (ul)
 

Всем фенкс кто откликнулся!
Пишу свой первый скрипт на javasript. Скрипт должен при onmouseover присвоить новый стиль (.show) атрибуту тега UL -> (вроде работает). Затем обратный момент (.hide) - не получается. console.log() - выводит className нужного тега UL.
doHide -не выполняется и не могу понять по каким признакам!
вот конструкция навигации

<div id="content" class="content">
   <ul id="menu" class="menu">
       <li><a href="#">item 1&nbsp </a></li>
       <li><a href="#">item 2&nbsp </a></li>
       <li><a href="#">item 3</a>
            <ul id="submenu" class="submenu">
                 <li><a href="#">item 3 sub 1</a></li>
                 <li><a href="#">item 3 sub 2</a></li>
            </ul>
        </li>
   </ul>
</div>

вот стайлы

ul li {list-style: none;}
   ul.menu {padding: 0; margin:0; display: block; height: 68px;}
   ul.menu > li  {float: left;  background: url("li.jpg") no-repeat top right;  height: 68px;} 
   ul.menu > li  a{display:block; padding-left: 3px; text-decoration: none; height: 68px;} 
   ul.menu > li  a:hover {display: block; background: url("a-hover.gif") repeat-x bottom left; height: 68px;} 
   ul.menu  > li > ul.submenu {display: none;}
   .show{display: block;}
   .hide{display: none;}

вот самскрипт

function Init(obj) { // смотрит если у А есть дети и среди них ul  - то это меню и передает обратно для смены className
	var obj = obj.parentNode.childNodes;
	var objLength = obj.length;
	if (objLength > 1) {
		for (var i = 0; i < objLength; i++ ) {
			if (obj[i].nodeType == 1 && obj[i].tagName == "UL" ) {
				return obj[i];
			}
		}
	} 
};

doVisible = function (event) { //определяет что target - A и передает его в Init()
	if (event.target.tagName == "A") { 
		var o = event.target;
		var oMenu = Init(o);
		if (typeof oMenu != "undefined") {
		    console.log(oMenu.className);
			oMenu.className = 'show';
		} 
	}
};
doHide = function (event) { // а вот эта не работает верне срабатывает переодически не могу понять в чем подвох
	if (event.target) {
		var ob = event.target;
		if (ob.tagName == 'UL' && ob.className == 'show') {
		console.log(ob.tagName+' doHide');}
	}
};

function doso (event) { // здесь вешаю обработчик события для отрибута  - если я все правильно понял
 document.addEventListener('mouseover',doVisible,false);
 document.addEventListener('mouseout',doHide,true);
};
doso();

в итгое меню открывается но не закрывается - помогите сделать так что бы закрывалось.

У Вас в doHide не присваивается класс hide.

в таком варианте на данный момент скрывает если только убераю указатель мыши с ul. menu li для ul.submenu (show) не выходит.

doHide = function (event) {
	if (event.target) {
		var ob = event.target;
		var re = event.relatedTarget;
		var t = re.parentNode.parentNode;
		var z = re.parentNode;
		if (re.tagName == 'A' &&  t.className == 'menu') {
			var o = document.getElementById('submenu').className = 'hide';
		//	var t = re.parentNode.parentNode;
			//console.log("object event "+ob.tagName+" from tag "+ re.tagName+" parent"+re.parentNode.tagName +"  111"+t.className);
			console.log(t.className)
		} else if (t.tagName != 'UL') {
		    var o = document.getElementById('submenu').className = 'hide';
     		console.log ('good');
			//if (t.onBlur) {
			  //  console.log('asdadas');}
		  } 
		  //console.log(ob.tagName +" "+ob.parentNode.tagName+" "+ re.tagName);
		 // ob.onMouseout = function () {ob.className = 'hide';}
	}
};

не могу понять. зачем вы вот так пишите

var o = document.getElementById('submenu').className = 'hide';

если вы просто присваиваете новый класс то незачем это все присваивать переменной.

document.getElementById('submenu').className = 'hide';

на мой взгляд так правильней.

Да и если вы хотите увидеть, что то на экране или отдебажить то используйте или debugger или alert, как по мне это удобнее.