Create jquery dropdown like RDP Menu Bar

Question

I'm not all that familiar with jquery so I'm not quite sure how to do this. Basically, I want a block of html to stay hidden at the top of the page with a ~3px edge sticking out (something to mouseover), and when you mouse over it, the hidden section slides down.

Basically I want it to work like the RDP full screen menu bar works. Any thoughts on what the best way of doing this is?

Answer 1

jquery:

$("#slide").bind("mouseover", function() {
     $(this).animate({
          top: '+=189'                      
     });
}).bind("mouseout", function() {
     $(this).animate({
          top: '-=189'                      
     });
});

style:

   <style type="text/css">
   #slide {
     background:#ccc;
     border:1px solid #000;
     width:200px;
     height:200px;
     padding:10px;
     position:absolute;
     top:-190px;
     }
  </style>

html:

<div id="slide">
test<br>
test<br>
test<br>
test
</div>