Выпадающее меню

[theo_]

Всем привет, заранее извиняюсь за боянность темы

Но хотелось бы самому во всем разобраться, а не использовать тупо чужие скрипты.

Есть горизонтальное меню

<div id="top_menu">

в нем расположены пункты меню, вот пример ссылки на главную страницу

<a class="top_menu_item" href="#" onmouseover="show_sub_menu()" onmouseout="hide_sub_menu()"><p class="top_menu_item_title">Главная</p></a>

ниже идет подменю, которое в обычном состоянии скрыто

<div id="top_submenu">

При наведении мышью на элемент верхнего меню, подменю появляется. Мышь отводим - исчезает. Как сделать так, чтобы подменю сразу не исчезало, а можно было выбрать его ссылки..

Заранее спасибо за помощь

[B~Vladi]

Но хотелось бы самому во всем разобраться, а не использовать тупо чужие скрипты.

Мне уже нравицо

Выставляй таймер...

[theo_]

B~Vladi, спасибо большое

как я понял из гугля, надо использовать setTimeout и clearTimeout ?

[zzz]

Да

[zzz]

SetTimeout
Могу выслать вам свой код генерится полностью Явой легко изменяем и при наведении меняются параметры CSS

[theo_]

пришлось отвлечься

zzz, спасибо, но мне хочется просто понять логику работы.

навел я мышкой на элемент меню, появилось подменю. мышку с пункта меню увожу, выполняю

timerID = setTimeout(hide(menu), 500);

только вот подменю убирается сразу, а не через 500мс

в чем может быть причина?

[theo_]

вообщем, что строка

timerID = setTimeout(hide(menu), 500);

что

hide(menu)

работают одинаково...

что я неправильно делаю?

[theo_]

вот такой вот скрипт получился:

var timerID = false;

function show_sub_menu()
{
  var menu = document.getElementById("top_submenu");
  menu.style.visibility = "visible";
  menu.onmouseover = "cancel_hide()";
  menu.onmouseout = "hide()";
}
function hide_sub_menu()
{
  var menu = document.getElementById("top_submenu");
  timerID = setTimeout(hide, 500);
}
function cancel_hide()
{
  var menu = document.getElementById("top_submenu");
  menu.style.visibility = "visible";
  clearTimeout(timerID);
}
function hide()
{
  var menu = document.getElementById("top_submenu");
  menu.style.visibility = "hidden";
}

не получается menu сделать глобальной переменной, в итоге еще и в функции ее каждый раз приходится определять

[theo_]

даже этот вот код работает неверно

var timerID = false;

function show_sub_menu()
{
  var menu = document.getElementById("top_submenu");
  menu.style.visibility = "visible";
}
function hide_sub_menu()
{
  var menu = document.getElementById("top_submenu");
  timerID = setTimeout(hide, 500);
}
function hide()
{
  var menu = document.getElementById("top_submenu");
  menu.style.visibility = "hidden";
}

смысл в нем, чтобы меню убиралось с задержкой 500мс

однако оно может убраться и в момент, когда указатель мыши находится над ссылкой

[zzz]

Можно полный код??