title: Simple jQuery slideDown doesn't work for two
body: <p>Problem:</p>
  
  <p>I have 2 slide downs, kind of a menu.</p>
  
  <pre><code>&lt;div id="one" style="background-color: red; width: 200px; heihgt: 125x; margin-left: 5px; float: left;"&gt;One&lt;/div&gt;
  &lt;div id="two" style="background-color: red; width: 200px; heihgt: 125x; margin-left: 5px; float: left;"&gt;Two&lt;/div&gt;&lt;br /&gt;
  &lt;div id="block1" style="background-color: blue; width: 200px; height: 300px; margin-left: 5px; float: left; display: none;"&gt;Blabla&lt;/div&gt;
  &lt;div id="block2" style="background-color: blue; width: 200px; height: 300px; margin-left: 5px; float: left; display: none;"&gt;Blabla2&lt;/div&gt;
  </code></pre>
  
  <p>And this jQuery script:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
      $("#one").hover(function() {
          $("#block1").slideToggle("slow");
      });
      $("#two").hover(function() {
          $("#block2").slideToggle("slow");
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The main idea is to slide down #block1, if you hover #one, and slide down #block2 if you hover #two</p>
  
  <p>But there is the problem:</p>
  
  <p>When hovering #one, It works fine.</p>
  
  <p>But when you hover #two, nothing happens.</p>
  
  <p>If you hover #one and then #two, it will work, but at the end it will slideDown #block1 again.
  I have no idea what causing it?</p>
  
  <p><strong>Question</strong></p>
  
  <p>What have I done wrong? How do I make it so when you hover #one, it toggles #block1, and when I hover #two, it toggles #block2.</p>
  
  <p>I just started learnign jQuery, and really confused of the syntax.
  Thanks!</p>