Jquery menu mouseover

[colinod]

I have a JQuery menu that works fine on mouseover mouseout for opening and closing but i am trying to make it open on click then stay open till mouse out.

The code i have is this

// JavaScript Document
 
$(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);
    });
 
 
// ]]>  
});

HTML for the menu is this whick is dynamically generated with asp

<ul id="ddmenu">
 <li><a href="boys2.asp?id=386&voicetype=All" id="maintab">Main Page</a></li>
 
 
 
    <li><a href="javascript:void(0)"  id="UKAccentsidtab">UK Accents</a>
        <ul id="ulUKAccentsid">
 
        <li><div  class="liUKAccentsidtext"><a href="boys2.asp?id=386&voicetype=Neutral" >Neutral</a></div></li>
 
        <li><div  class="liUKAccentsidtext"><a href="boys2.asp?id=386&voicetype=Irish" >Irish</a></div></li>
 
        <li><div  class="liUKAccentsidtext"><a href="boys2.asp?id=386&voicetype=Scottish" >Scottish</a></div></li>
 
 
        </ul>         
    </li>
 
 
 
    <li><a href="javascript:void(0)"  id="Agesidtab">Ages</a>
        <ul id="ulAgesid">
 
        <li><div  class="liAgesidtext"><a href="boys2.asp?id=386&voicetype=20s-30s" >20's - 30's</a></div></li>
 
        <li><div  class="liAgesidtext"><a href="boys2.asp?id=386&voicetype=30s" >30s</a></div></li>
 
        <li><div  class="liAgesidtext"><a href="boys2.asp?id=386&voicetype=30s-40s" >30's - 40's</a></div></li>
 
 
        </ul>         
    </li>
 
 
 
    <li><a href="javascript:void(0)"  id="Stylesidtab">Styles</a>
        <ul id="ulStylesid">
 
        <li><div  class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Animation/Cartoon" >Animation/Cartoon</a></div></li>
 
        <li><div  class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Authoritative" >Authoritative</a></div></li>
 
        <li><div  class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Characterful/Quirky" >Characterful/Quirky</a></div></li>
 
        <li><div  class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Comedy/Humorous" >Comedy/Humorous</a></div></li>
 
        <li><div  class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Deep/Powerful/Dramatic" >Deep/Powerful/Dramatic</a></div></li>
 
        <li><div  class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Documentary/Corporate" >Documentary/Corporate</a></div></li>
 
        <li><div  class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Friendly/Upbeat" >Friendly/Upbeat</a></div></li>
 
        <li><div  class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Impressions" >Impressions</a></div></li>
 
        <li><div  class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Kid-Friendly" >Kid Friendly</a></div></li>
 
        <li><div  class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Movie-Trailer" >Movie Trailer</a></div></li>
 
        <li><div  class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Sports-Commentator" >Sports Commentator</a></div></li>
 
        <li><div  class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Versatile" >Versatile</a></div></li>
 
 
        </ul>         
    </li>
 
 
 
    <li><a href="javascript:void(0)"  id="WorldAccentsidtab">World Accents</a>
        <ul id="ulWorldAccentsid">
 
        <li><div  class="liWorldAccentsidtext"><a href="boys2.asp?id=386&voicetype=Australian" >Australian</a></div></li>
 
        <li><div  class="liWorldAccentsidtext"><a href="boys2.asp?id=386&voicetype=Dutch" >Dutch</a></div></li>
 
        <li><div  class="liWorldAccentsidtext"><a href="boys2.asp?id=386&voicetype=French" >French</a></div></li>
 
        <li><div  class="liWorldAccentsidtext"><a href="boys2.asp?id=386&voicetype=Mexican" >Mexican</a></div></li>
 
        <li><div  class="liWorldAccentsidtext"><a href="boys2.asp?id=386&voicetype=Oriental" >Oriental</a></div></li>
 
        <li><div  class="liWorldAccentsidtext"><a href="boys2.asp?id=386&voicetype=Russian" >Russian</a></div></li>
 
        <li><div  class="liWorldAccentsidtext"><a href="boys2.asp?id=386&voicetype=South-African" >South African</a></div></li>
 
        <li><div  class="liWorldAccentsidtext"><a href="boys2.asp?id=386&voicetype=Spanish" >Spanish</a></div></li>
 
 
        </ul>         
    </li>
 
<li><a href="boys2.asp?id=386&voicetype=USA/Mid-Atlantic" id="usatab">USA / Mid Atlantic</a>
</li>
 
 
 
    <li><a href="javascript:void(0)"  id="ForeignLanguagesidtab">Foreign Languages</a>
        <ul id="ulForeignLanguagesid">
 
        <li><div  class="liForeignLanguagesidtext"><a href="boys2.asp?id=386&voicetype=French-Language" >French Language</a></div></li>
 
 
        </ul>         
    </li>
 
 
</ul>

this page can be seen here

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

many thanks