Pokud chceme, aby měla hlavní položka podpoložky (které se budou vysouvat), můžeme to zařídit vložením dalšího seznamu UL. Problém však nastal ve chvíli, kdy se měly podpoložky vysunout a následně by na ně uživatel přejel myší - než se na ně myš přesunula, menu se zasunulo.
Pro úplnost, HTML kód menu by mohl vypadat například takto:
<ul>
<li>Menu položka
<ul>
<li><a href="#">Podpoložka</a></li>
</ul>
</li>
<li>Menu položka
<ul>
<li><a href="#">Podpoložka</a></li>
<li><a href="#">Podpoložka</a></li>
<li><a href="#">Podpoložka</a></li>
</ul>
</li>
<li><a href="#">Menu položka</a></li>
<li>Menu položka
<ul>
<li><a href="#">Podpoložka</a></li>
<li><a href="#">Podpoložka</a></li>
</ul>
</li>
</ul>
Dlouho jsem bádal, čím to může být způsobeno - původně jsem si myslel, že nějakým paddingem, který už jQuery událost mouseout možná nebere jako součást elementu a tak se spustí. Problém byl nakonec v použitých jQuery událostech mouseover a mouseout.
V dokumentaci totiž naleznete i další události, které fungují podobně - mouseenter a mouseleave. Podle názvu jsou shodné a tak jsem jim nevěnoval pozornost, ale při tvorbě menu jsem začal pátrat, jaký je mezi nimi rozdíl.
Ať už si otevřete stránku dokumentace jQuery o události mouseover, mouseout, mouseenter a nebo mouseleave, vždy narazíte na příklad, který právě rozdíl mezi těmito funkcemi vysvětluje.
Mouseover se totiž spouští vícekrát i během pohybu v rámci zvoleného elementu, kdežto mouseenter se spustí opravdu pouze jednou při vstupu do oblasti elementu. Pro menu, které jsem tvořil, se tedy rozhodně hodí události mouseenter a mouseleave.