i've got a problem with my javascript (i'm in a real beginner state so sorry for that)

Ive got a menu like this: 

```
<ul class="menu">
   <li><a href="#">Home</a></li>    
   <li class="shownav"><a href="#">Services</a></li>    
   <li><a href="#">Projects</a></li>    
</ul>

```

And my content is similar to this:

```
<div id="contentwrapper">
     <div id="content">
          <!--Content here-->
     </div>
</div>

```

what i want to achieve is that when you click li.shownav, #contentwrapper will slide 30 pixels down and reveals a 2nd navigation bar 

is there any way to trigger a div to go down 30 pixels ?