Jquery horizontal menu work on click

[colinod]

I have a horizontal menu that uses the following jquery to work

$(document).ready(function () {
// <![CDATA[
    var timeout    = 500;
    var closetimer = 0;
    var ddmenuitem = 0;
 
    function ddmenu_open(){
        ddmenu_canceltimer();
           ddmenu_close();
           ddmenuitem = $(this).find('ul').css('visibility', 'visible');
           $('#biog').css('visibility', 'hidden');
    }
 
    function ddmenu_close(){
        if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
        $('#biog').css('visibility', 'visible');
    }
 
    function ddmenu_timer(){
        closetimer = window.setTimeout(ddmenu_close, timeout);
    }
 
    function ddmenu_canceltimer(){ 
        if(closetimer){ 
            window.clearTimeout(closetimer);
                closetimer = null;
    }}
 
    $(document).ready(function(){ 
        $('#ddmenu > li').bind('mouseover', ddmenu_open)
        $('#ddmenu > li').bind('mouseout',  ddmenu_timer)
    });
 
    document.onclick = ddmenu_close;
// ]]>  
});

this works fine but i want to get the submenu to appear on click instead of on mouseover but still dissapear when the mouse goes out of the menu

i tried changing the

$('#ddmenu > li').bind('mouseover', ddmenu_open) line to

$('#ddmenu > li').bind('click', ddmenu_open)

$('#ddmenu > li').click(ddmenu_open)

and

$('#ddmenu > li').on('click', ddmenu_open)

but none of these worked

any ideas??

[colinod]

Figured this out just removed the

document.onclick = ddmenu_close;

line at the end

Now i have a problem closing the menu i want to close on mouse out so my jquery now is

at the moment i have a different id for each submenu

$(document).ready(function () {
// <![CDATA[
    var timeout    = 500;
    var closetimer = 0;
    var ddmenuitem = 0;
 
    function ddmenu_open(){
        ddmenu_canceltimer();
           ddmenu_close();
           ddmenuitem = $(this).find('ul').css('visibility', 'visible');
           $('#biog').css('visibility', 'hidden');
    }
 
    function ddmenu_close(){
        if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
        $('#biog').css('visibility', 'visible');
    }
 
    function ddmenu_timer(){
        closetimer = window.setTimeout(ddmenu_close, timeout);
    }
 
    function ddmenu_canceltimer(){ 
        if(closetimer){ 
            window.clearTimeout(closetimer);
                closetimer = null;
    }}
 
    $(document).ready(function(){ 
        $('#ddmenu > li').bind('click', ddmenu_open);
        $('#ulAgesid').bind('mouseout',  ddmenu_timer);
        $('#ulUKAccentsid').bind('mouseout',  ddmenu_timer);
        $('#ulStylesid').bind('mouseout',  ddmenu_timer);
        $('#ulWorldAccentsid').bind('mouseout',  ddmenu_timer);
        $('#ulForeignLanguagesid').bind('mouseout',  ddmenu_timer);
    });
 
 
// ]]>  
});

problem i have is if you go onto the ages for the example i have coloured it red, if you stay in the red area all is fine but once you try and go over the button the menu closes

page can be seen here

http://www.yaketyyak.co.uk/newpages/...&voicetype=All