jquery dropdown menu bind mouseout timer is not working
<p>What I wanted to achieve is: Once click on INFO text, the sub-menu show up. When mouse is still on the sub-menu, it remains there. Mouse out the sub-menu, it will be disappeared.</p>

<p>But in my code, the second part does not work.
Even my mouse is still on the sub-menu items, the menu is disappeared after the time out value.</p>

<pre><code>var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open2()
{  
jsddm_canceltimer();
   jsddm_close();
   ddmenuitem = jQuery(this).find('ul').css('visibility', 'visible');
   ddmenuitem = jQuery(this).find('ul').toggle();}   

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

jQuery(document).ready(function()
{    
jQuery('#INFO &gt; ul &gt; li').bind('click', jsddm_open2);
jQuery('#INFO &gt; ul &gt; li &gt; ul &gt; li').bind('mouseout',  jsddm_timer);  
});
</code></pre>

<p>HTML markup: </p>

<pre><code>&lt;div id="INFO"&gt;
        &lt;ul&gt;
            &lt;li&gt;INFO
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;                            
                &lt;/ul&gt;
            &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;  
</code></pre>

<p>CSS</p>

<pre><code>#INFO ul{padding: 0;}
#INFO ul li{display: block; width: 200px; padding-left: 25px; padding-top: 1px;}

#INFO ul li ul{position: absolute; z-index: 999; visibility: hidden; top: 20px; padding: 0px; left: 6px; border: 1px solid #888; border-top: none; height: auto !important; width: 180px; display: none;}
#INFO ul li ul li{ padding: 5px 20px; background: #1d7177; width: 140px; display: block;}
#INFO ul li ul li:hover{background: #000;}
#INFO a{ color: #fff; padding: 0px; height: auto;}
</code></pre>

<p>Thanks in advanced.</p>
