jquery - slideDown() effect issue -

i’ve noticed slidedown() effect doesn’t work div navigationmain, notice how i’m using ul/li tags header menu in div navigationmain. notice how i’ve placed id name within a/hyperlink tags header nav portfolio/about/contact within li tags , in div navigationmain. i’ve tried using slidedown() effect id #about-link nav button in navigationmain div , suppose open hidden div called aboutlayout opens small section of div , closes immediately. reason slidedown() effect works div doesn’t include ul/li , a/hyperlink tags. within div i’ve placed id name in img tag , slidedown() effect works. possible slidedown() effect doesn’t work ul/li , a/hyperlink tags?

jsfiddle: http://jsfiddle.net/tb8h5/17/ http://jsfiddle.net/tb8h5/17/embedded/result/ (the navigation menu portfolio/about/contact text isn't appearing on jsfiddle link, i’ve added background colour show navigation menu)

html

<div class="header"> <div class="container">  <div class="headermain">  </div> <div class="navigationmain">  <ul class="nav"> <li><a href="" id="portfolio-link">portfolio</a></li> <li><a href="" id="about-link">about</a></li> <li><a href="" id="contact-link">contact</a></li> </ul> </div> </div> </div><!-- end of header -->  <div class="aboutlayout"> </div> <!-- hidden div -->  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2     /jquery.min.js"></script> 

css

.header { background: #242424; height: 165px; background:url(../images/header.png) repeat center center;  min-width: 1075px; }  .container { height: 165px; margin-left: auto; margin-right: auto; width: 1075px;  }  .headermain{ height: 165px;  position: relative; width: 195px; float: left; left: 20px; top: 4px; background:url(../images/arlogo.png) no-repeat center center;  }  .navigationmain{ height: 154px; margin-left: auto; margin-top: -4px; position: relative; width: 665px; right: 30px; left: 160px; }  li{ display: inline; }  .nav { position: relative; top: 70px; }  .nav li{    display: block; float: left; }  .nav li { background: url(../images/slash.png) no-repeat; padding-left: 26px; }  .nav li:first-child { background: none; }  .nav { display: block; text-indent: -9999px; height: 35px; width: 150px; }  #portfolio-link { background: url(../images/portfolio.png) no-repeat; }  #about-link { background: url(../images/about.png) no-repeat; height: 35px; width: 115px; }  #contact-link { background: url(../images/contact.png)no-repeat; }  #slash-link{ background: url(../images/slash.png)no-repeat; }  .aboutlayout{ background: white; /*#ecebeb; */  height: 350px; position: relative; } 

jquery

$(document).ready(function() {  $('.aboutlayout').hide();  $('#about-link').click(function() { $('.aboutlayout').slidedown(); })  }) 

an anchor empty href reloads current page when click it.
should use hash, , preferably prevent default action in event handler, otherwise page reload, , animations not shown.

change

<a href="" id="about-link">about</a> 

to

<a href="#" id="about-link">about</a> 

and do

$('#about-link').click(function(e) {     e.preventdefault();     $('.aboutlayout').slidedown(); });