Vyjížděcí menu - problém s Timeout

Obávám se, že to je dáno tím, že máš zobrazovanou položku podmenu umístěnou ve stejném elementu/tagu u kterého máš atributy onmouseover a onmouseout. Prohlížeč k tomu zřejmě přistupuje tak že při zobrazení podmenu, roztáhne elment li. Tím, že ho roztáhne zo zjevně celý překreslí. A překreslení zřejmě probíhá tak, že se původní element vymaže a nakreslí se zcela nový, včetně zrovna zobrazeného podmenu.

Tím pádem, se při vymazání na chvíli ztratí událost onmouseover, skočí tam událost onmouseout a v ní se nastaví skrytí za určitou dobu. Ta hvíle je tak krátká, že ji nelze pouhým okem postřehnout, ale domnívám se, že tam je (chování stránky tomu nasvědčuje).

Řešení vidím dvě:

1) Ošetřit funkci setTimeout tak, aby po se opětovném volání události onmouseover zrušila. Tím odpadne i problém, kdy uživatel rychle odjede z menu, před jeho skrytím se na něj vrátí a v tomto případě mu menu přesto zmizí.

2) Umístit zobrazované podmenu, mimo položku nadřazeného menu, takže kód bude vypadat takto:

<script type="text/javascript">



function hide_prog() {



document.getElementById('prog').style.display='none';



}



</script>



<li onMouseOver="document.getElementById('prog').style.display='block'"



 onMouseOut="setTimeout('hide_prog()',1000)">.....</li>







<div id="prog" style="display:none;">



podmenu, které se má zobrazit: <ul>.....



</div>

Přikláním se spíš k prvnímu řešení.

Dobrý den,
mám možná podobný problém:
Horizontální menu, podmenu se otvírají na onclick. Schování podmenu proběhne po najetí na jiný prvek než podmenu za určitý čas. Problém je, že někdy musím kliknout vícekrát, aby se podmenu zobrazilo. Napoprvé se zobrazí jen na kraťoučko. Napodruhé je vše OK.
Používám tuhle konstrukci:

var cas=600;

function zobraz()
{
document.getElementById('Zprava').style.display='';
}

function skryj1()
{
var int1;
int1 = setTimeout("document.getElementById('Zprava').style.display = 'none'", cas);
}

-------------

<li class='main'><h5 onclick='zobraz(); return false;' ><a href='#'>hlavni menu</a></h5>

<ul class='sub' id=Zprava style='display: none'>

<li><a href='#'>podmenu1</a></li>
<li><a href='#'>podmenu2</a></li>

</ul>

</li>
--------
<div onMouseOver='skryj1(); return false;'>
........
zbytek dokumentu
</div>

Díky za radu.