title: jQuery hover to slide?
body: <p><em>Check the bottom for revised edition</em></p>
  
  <p>Alright, here's the issue. I have a <code>li</code> with a <code>div</code> inside, and I'm trying to hover the <code>li</code> to get the <code>div</code> to slide up into view.</p>
  
  <p><em>Here's the HTML:</em></p>
  
  <pre><code>&lt;li id="one"&gt;
      &lt;div&gt;
          &lt;h4&gt;title&lt;/h4&gt;
          &lt;p&gt;description&lt;/p&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p><em>Right now I have this in my CSS:</em></p>
  
  <pre><code>#one div { display: none; }
  </code></pre>
  
  <p><em>And this for my JS:</em></p>
  
  <pre><code>$(document).ready(function() {
  
      $('#one').hover(function() {
          $('#one &gt; div').css({ display : 'block' });
      });
  
  });
  </code></pre>
  
  <p>I know I could just used CSS psuedo <code>:hover</code> to make it pop up, but I thought if I wanted to to a slide effect then I might as well do it all in JS. The first problem is this isn't working :|. Once I get it to just show up I want to add a slide effect to it, and I'm not sure if this is the right way to approach doing that.</p>
  
  <p>Thanks guys/gals</p>
  
  <p><strong>revised</strong></p>
  
  <p><em>New JavaScript</em></p>
  
  <pre><code>$(document).ready(function() {
  
      $('#one').hover(function () {
          $('#one &gt; div').slideToggle();
      });
  
  });
  </code></pre>
  
  <p>This works! Although it comes down from the top, and I planned on having it come up from the bottom.</p>