ul li show/hide with jQuery
<p>I'm Trying to create A drop down menu.</p>

<p>but i couldn't get the sub menu item to hide on mouseout.</p>

<p>It hides itself on every move</p>

<p>My jQuery code:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function() {
        $('ul ul').hide();
        $('ul li.top_menu_first a').removeAttr("href");
        $('ul li.top_menu_first &gt; a').mouseover(function(event) {
            $(this).parent().find('ul').show('slow');
        });

        $('ul li.top_menu_first ul').mouseout(function(event) {
            $('ul ul').hide('slow');
        });
    });
&lt;/script&gt;  
</code></pre>

<p>My HTMLcode:</p>

<pre><code>&lt;div id="top_menu"&gt;
    &lt;ul&gt;
        &lt;li class="top_menu_first"&gt;&lt;a href="http://google.com"&gt;ABC&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a&gt;1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a&gt;2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a&gt;3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;   
        &lt;li class="top_menu_first"&gt;&lt;a&gt;DEF&lt;/a&gt;&lt;/li&gt;
        &lt;li class="top_menu_first"&gt;&lt;a&gt;GHI&lt;/a&gt;&lt;/li&gt;
        &lt;li class="top_menu_first"&gt;&lt;a&gt;JKL&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a&gt;4&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a&gt;5&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a&gt;6&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;   
        &lt;li class="top_menu_first"&gt;&lt;a&gt;MNO&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a&gt;7&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a&gt;8&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li class="top_menu_first"&gt;
    &lt;/ul&gt;
&lt;/div&gt;
&lt;div id="footer"&gt;&lt;/div&gt;
</code></pre>

<p>Please if anyone can help</p>
