Jquery dropdown when mouseover
<p>How do I stay the child open on mouseover/mouseout on the PARENT1 and if mouseover the other PARENT2 its child opens up and the PARENT1 childs hide on mouseover on this PARENT2..</p>

<pre>var drop = $('#nav li > ul');
var par = $('#nav li')
drop.hide();
$('#nav li').mouseover(function(){
    drop.show();
});
drop.mouseout(function(){
      drop.show()
});</pre>

<pre><code>&lt;ul id="nav"&gt;
&lt;li&gt;PARENT 1
  &lt;ul&gt;
    &lt;li&gt;CHILD &lt;/li&gt;
    &lt;li&gt;CHILD &lt;/li&gt;
    &lt;li&gt;CHILD &lt;/li&gt;
  &lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;PARENT 2
                   &lt;ul&gt;
    &lt;li&gt;CHILD &lt;/li&gt;
    &lt;li&gt;CHILD &lt;/li&gt;
    &lt;li&gt;CHILD &lt;/li&gt;
  &lt;/ul&gt;
                &lt;/li&gt;
&lt;li&gt;PARENT 3&lt;/li&gt;
&lt;li&gt;PARENT 4&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
