title: Jquery dropdown when mouseover
body: <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>