add jquery slidedown effect

<style type="text/css">
/*---------------------------
main styles
---------------------------*/
 
body {font-size: 62.5%;line-height:1.5;font-family: Arial, Helvetica, sans-serif;background:#CCC url(../images/background.jpg) 0 0 repeat-x;}
 
a {text-decoration:none;}
a:hover {text-decoration:underline;}
p {margin:12px 0 12px 0;}
.imgfloatleft {float:left;margin:0 15px 15px 0;}
 
#wrapper {font-size:1.3em;width:920px;height:auto;position:relative;clear:both;margin:0 auto 0 auto;background:#FFF url(../images/head-bg.jpg) repeat-x;}
#header {clear:both;padding:0 30px 0 30px;width:860px;height:120px;background:url(../images/msw-logo.png) no-repeat;}
#home #main {background:#FFF url(../images/home-bg.jpg) no-repeat;}
#main {clear:both;width:860px;padding:0 30px 30px 30px;}
#footer {clear:both;width:860px;padding-top:30px;}
#footer, #footer a {color:#666;}
#footer .strap {font-size:14px;color:#F00;}
 
#main .intro {float:right;width:405px;}
#main .titles {width:510px;float:right;}
#main h1 {font-size:18px;color:#F00;line-height:1.1;padding:5px 0 15px 0;}
#main h2 {font-size:26px;color:#333;}
#main ul {margin:12px 0 12px 0;}
#main li {margin:6px 0 6px 13px;}
#main a {color:#777;}
#main a:hover {color:#F00;}
.space {float:left;width:1px;height:390px;}
#map {float:right;width:600px;height:500px;margin:0 0 20px 20px;}
.clear {display:block;clear:both;}
.red {color:#F00;}
#plant a.arrowleft {color:#F00;font-weight:bold;font-size:105%;background:url(../images/arrow-left.gif) 0 50% no-repeat;padding-left:15px;}
 
#plant ul.contactbtn  {list-style-type:none;margin:0;padding:0;clear:both;}
#plant ul.contactbtn li {float:left;list-style-type:none;}
#plant ul.contactbtn a:hover {text-decoration:none;}
      
#plant ul.contactbtn li a {
      display:block;
      font-size:110%;
      color:#FFF;
      padding:7px 14px 9px 14px;
      background:url(../images/navback_left.gif) left top no-repeat;}
 
#plant ul.contactbtn li a:hover {background:#F00;}
 
#plant ul.contactbtn li{
      background:url(../images/navback_right.gif) right top no-repeat;}
      
#plant ul.contactbtn li:hover{background:#F00;}
 
 
/*---------------------------
main nav
---------------------------*/
 
#mainnav {position:relative;padding:61px 0 0 130px;height:37px;background:url(../images/nav-background.gif) 85px 80px no-repeat;}
#nav, #nav * { padding: 0; margin: 0; }
#nav, #nav ul { list-style: none; }
#nav ul {float:left;}
 
#nav li {position:relative;}
 
#nav li,#nav a{
      display:inline;
      float:left;}
      
#nav a:hover {text-decoration:none;}
      
#nav li a {
      display:block;
      font-size:110%;
      color:#FFF;
      padding:7px 14px 9px 14px;
      background:url(../images/navback_left.gif) left top no-repeat;}
 
#nav li a:hover {background:#F00;}
 
      
#nav li{
      background:url(../images/navback_right.gif) right top no-repeat;
      margin-right:2px;}
      
#nav li:hover{background:#F00;}
 
 
/*---------------------------
main nav page selectors
---------------------------*/
 
#home li#m_home, #services li#m_services, #plant li#m_plant, #sp3 li#m_sp3, #contact li#m_contact {background:#F00 url(../images/navback_sel.gif) right top no-repeat;}
#home li#m_home a, #services li#m_services a, #plant li#m_plant a, #sp3 li#m_sp3 a, #contact li#m_contact a {background:url(../images/navback_sel_left.gif) left top no-repeat;}
#services li#m_services li a {background-image:none;}
 
/*---------------------------
main nav - submenus
---------------------------*/
.dropdown {width:500px;display:none;position:relative;clear:both;background: url(../images/dropbox_top.gif) top left no-repeat;text-align: left;}
.dropdown .mid {width:604px;clear:both;background: url(../images/dropbox_mid.gif) left repeat-y;}
.dropdown .base {height:30px;width:604px;clear:both;background: url(../images/dropbox_base.gif) bottom left no-repeat;}
.dropdown .left {width:240px;margin-left:10px;}
 
.dropdown ul {z-index:100;position:relative;float:left;margin:0;padding:0;overflow:visible;}
.dropdown ul li {color:#333;clear:both;float:none;display:block;background-image:none;width:100%;margin:0;padding:0;}
.dropdown ul li a {color:#666;padding:3px 3px 3px 5px;float:none;display:block;background-image:none;}
.dropdown ul li:hover {background-image:none;}
.dropdown ul li a:hover {background-color: #F00;color:#FFF;background-image:none;}
</style>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 
<script type="text/javascript">
  var timer;
  $(document).ready(function(){
    $('li.headlink, div.dropdown').hover(
      function() {
        clearTimeout(timer);
        var menu = $('div.dropdown');
        if (! menu.is(':visible'))
        {
          var pos = $(this).position();
          var x = pos.left;
          var y = pos.top;
          menu.css({'left':x});
          menu.slideDown('fast');
        }
      },
      function() {
        timer = setTimeout(function() {
          $('div.dropdown').slideUp('fast');
        }, 100);
      });
  });
</script>
 
 
<div id="mainnav">
  <ul id="nav">
    <li id="m_home"><a href="index.htm">home</a></li>
    <li class="headlink" id="m_services"><a href="services.htm">services</a></li>
    <li id="m_plant"><a href="plantforsale.htm">plant&nbsp;for&nbsp;sale</a></li>
    <li id="m_contact"><a href="contactus.htm">contact&nbsp;us</a></li>
  </ul>
</div>
<div class="dropdown">
  <div class="mid">
    <ul class="left">
      <li><a href="machinerepair.htm">Machine Repair</a></li>
      <li><a href="machineservice.htm">Machine Service</a></li>
      <li><a href="calibration.htm">Validation and Calibration to 7570</a></li>
      <li><a href="transformer.htm">Transfomer Rewind and Manufacture</a></li>
      <li><a href="pcb.htm">Circuit Board Repair</a></li>
      <li><a href="pcb.htm">Circuit Board Manufacture</a></li>
      <li><a href="wirefeed.htm">Range of wire feeders</a></li>
    </ul>
 
    <ul>
      <li><a href="recon.htm">Reconditioned equipment</a></li>
      <li><a href="design.htm">Design and Manufacture of specialist machines</a></li>
      <li><a href="parts.htm">Replacement parts</a></li>
      <li><a href="new.htm">New machine sales</a></li>
      <li><a href="parts.htm">Spare parts</a></li>
      <li><a href="parts.htm">Consumables</a></li>
      <li><a href="hire.htm">Equipment hire</a></li>
    </ul>
    <div class="clear"></div>
  </div>
  <div class="base"></div>
</div>

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170: