User Friendly Multi level CSS Dropdowns

[alstonfds]

My point is simple ; CSS dropdown menus are not user friendly without a delay on mouse out.


Anybody know how to put this : (Based on generic Suckerfish dropdown)

http://www.theoceaniqueresort.com/images/menu.html


and this :



<script type="text/javascript">

var menu = null;
function init_menu()
{
menu = document.getElementById('menu');
var li = menu.getElementsByTagName('li'), i = li.length;
while (i--) li[i].onmouseover = showMenu;
menu.onmouseout = timeout;
menu.onmouseover = cleartimer;
}

var timer = null;
function timeout()
{
timer = setTimeout('hideMenus(menu, null)', 1000);
}

function cleartimer()
{
if (timer)
{
clearTimeout(timer);
timer = null;
}
}

function showMenu()
{
var ul = this.parentNode;
while (ul)
{
if (ul.tagName.toLowerCase() == 'ul')
{
hideMenus(ul, this);
break;
}

ul = ul.parentNode;
}

ul = this.firstChild;
while (ul)
{
if (ul.nodeType == 1 && ul.tagName.toLowerCase() == 'ul')
{
ul.style.display = 'block';
ul.style.visibility = ''; // necessary for IE
break;
}

ul = ul.nextSibling;
}
}

function hideMenus(level, skipli)
{
var stack = [level], i = 0, li, j, el, tag;
do
{
li = stack[i].childNodes, j = li.length;
while (j--)
{
el = li[j];
if (el.nodeType == 1 && el != skipli)
{
tag = el.tagName.toLowerCase();
if (tag == 'li')
{
stack[i++] = el;
}
else if (tag == 'ul' && el.style.display == 'block')
{
stack[i++] = el;
el.style.display = 'none';
el.style.visibility = 'hidden'; // necessary for IE
}
}
}
}
while (i--);
}

</script>


To get User Friendly Multilevel CSS Drop down like this :

http://therealcrisp.xs4all.nl/upload/menu.html

.