Делаю обычное выпадающее меню. При наведении мыши на заголовок меню оно выпадает, при onmouseout убирается.
Проблема в том, что onmouseout возникает при перемещении курсора мыши по меню, когда курсор наводится на ссылку - пункт меню. По идее, после mouseout на диве(выпавшем меню), должно возникнуть mouseover на ссылке и так как у ссылки нет своего обработчика события mouseover, событие должно всплыть до дива и меню при этом должно остаться на своем месте(ну или в крайнем случае мигнуть, как бывает в таких случаях). Но меню исчезает.
<html>
<head>
<style>
div.menu ul {padding-top:0; float:right;}
div.menu ul li {float:left; list-style:none; font-weight:bold; padding-right:15px; }
div.menu ul li div.fall { visibility:hidden; background-color:#4682B4; }
</style>
<title>Введение в DOM</title>
<script src="jquery-1.3.2.js"></script>
<script>
$(document).ready(function() {
var titles = $("div.menu ul li #tab a");
menuDiv = '';
for (var i = 0; i < titles.length; i++) {
var title = titles[i];
title.onmouseover = function(e) {
if (menuDiv != '') menuDiv.style.visibility = "hidden";
var e = e || window.event;
var t = e.target || e.srcElement;
menuDiv = navigator.appName == 'Microsoft Internet Explorer'
? t.parentNode.parentNode.childNodes[1] : t.parentNode.parentNode.childNodes[2];
menuDiv.style.visibility = "visible";
menuDiv.onmouseout = function(e) {
menuDiv.style.visibility = "hidden";
}
};
}
});
</script>
</head>
<body>
<div class="menu">
<ul>
<li class="current"><div id="tab">Главная</div>
<div class="fall">
<a href="">item 1</a>
<a href="">item 2</a>
<a href="">item 3</a>
</div>
</li>
<li><div id="tab"><a href="/chords/about/">Ноты</a></div>
<div class="fall">
<a href="">item 1</a>
<a href="">item 2</a>
<a href="">item 3</a>
</div>
</li>
<li><div id="tab"><a href="/chords/tab/">Табулатуры</a></div>
<div class="fall">
<a href="">item 1</a>
<a href="">item 2</a>
<a href="">item 3</a>
</div>
</li>
<li><div id="tab"><a href="/chords/services/">Доска обьявлений</a></div>
<div class="fall">
<a href="">item 1</a>
<a href="">item 2</a>
<a href="">item 3</a>
</div>
</li>
<li><div id="tab"><a href="/chords/feedbacks/">Контакты</a></div>
<div class="fall">
<a href="">item 1</a>
<a href="">item 2</a>
<a href="">item 3</a>
</div>
</li>
</ul>
</div>
</body>
</html>