Show children onmouseover but on mouseoff hide the children
<p>I trying to make a menu compatible with IE... :( </p>

<p>I did a menu using css that has this structure:</p>

<pre><code>&lt;div id="menu"&gt;
&lt;ul id="menuu"&gt;
&lt;li&gt;&lt;a href="#" class="parent"&gt;Parent&lt;/a&gt;
&lt;ul class="children"&gt;
&lt;li&gt;&lt;a href="/#"&gt;name&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="/#"&gt;name&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="/#"&gt;name&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>What I would like to do is:<br />
-when mouse is over a.parent show children using fadeIn<br />
-When you are off from Parent and also out from children, hide children.<br />
-When you go in another children hide the previous children.<br /></p>

<p>I did a script but I am not able to hide the children in the proper way.<br /></p>

<pre><code>&lt;script&gt;
$('a.parent').hover(function() {
    if( $(this).next().hasClass('children') ){
        $(this).next().fadeIn();
    }else{
        //alert( 'false' );
    }
},
function() {
//here when you are out from a.parent

});
&lt;/script&gt;   
</code></pre>

<p>Because if I hide the children(submenu) when I'm out from the parent, I cannot open any link from children because when I move from parent to children, children is hiden..
So I don't know how to solve it... :(</p>

<p>Someone can help me??
Thank you very much!</p>
