i have a Menu that show or hide than a rolls the mouse pointer into ( mouseover ) and ( mouseout ) an element's space. But whan i fire mouseout an element space to hide menu, the open shave works only if i move mouse pointer an top eletment list ul id="menu". And d't hide then i move mouse pointer on bootom element list ul id=submenu. why ? who can help at this problem???
<ul id="menu" class="menu">
<li><a href="#">item 1  </a></li>
<li><a href="#">item 2  </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>function doMenu (li){
var oli = li.childNodes;
var len = oli.length;
if (len > 1) {
for (var i = 0; i < len; i++) {
if (oli[i].nodeType == 1) {
if (oli[i].tagName == 'UL') {
return oli[i];
}
}
}
}
};
function doShow(e) {
if (e) {
var t = e.target;
var pN = t.parentNode;
if (pN.tagName == 'LI') {
if (doMenu(pN)) {
var oUl = doMenu(pN);
oUl.style.display = "block";
}
}
}
};
function doHide (e) {
if (e) {
var d = document;
var t = e.target;
var n = e.relatedTarget;
if (t.parentNode.parentNode.className != 'submenu') {
console.log('1');
document.getElementById('submenu').style.display = 'none';
}
else document.getElementById('submenu').style.display = 'block';
}
}
function doEvent (event){
document.addEventListener('mouseover', doShow, false);
document.addEventListener('mouseout', doHide, true);
}
doEvent();