Problem with a jQuery script (drop-down)

Problem with a jQuery script (drop-down)

Well i have this script for a drop-down menu.

My problem is that the box starts already dropped down. I want so that it is "dropped in" (i mean simply gone) and when i click the link, the box drops down. Hope you understand me.

I know it's quite easy, but the fact is i am starting out with this and i am still learning, and i need this kind of script which partly i have found here and i wanted to extend it to my needs, without success: http://www.learningjquery.com/2008/02/s ... ts-plugins .

Here is the code:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Test</title>

  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

  <script>
jQuery.fn.blindToggle = function(speed, easing, callback) {
  var h = this.height() + parseInt(this.css('paddingTop')) + parseInt(this.css('paddingBottom'));
  return this.animate({marginTop: parseInt(this.css('marginTop')) < 0 ? 0 : -h}, speed, easing, callback);
};

$(document).ready(function() {
  var $box = $('#box')
  .wrap('<div id="box-outer"></div>');
  $('#blind').click(function() {
  $box.blindToggle('slow');
  });
});

  </script>
 
  <style>
#box {
padding: 1px 15px 5px 0;
  height: 100px;
  width: 100px;
  text-align: left;
  background: #333;
  color: #FFF;
}
#box-outer {
  overflow: hidden;
  height: 120px;
}
  </style>

</head>
 
<body>
  <a href="#" id="blind">Click me(</a>
  <div id="box">
     <ul>
         <li>Drop-down Item1</li>
         <li>Drop-down Item2</li>
         <li>Drop-down Item3</li>
         <li>Drop-down Item4</li>
     </ul>
  </div>
</body>
</html>



Hopefully someone knows what needs to be added, i tried a lot of things with my poorly knowledge, but without success.

Thank you.