<script type="text/javascript">
  $(document).ready(function () {

$('#nav li').hover(  
function () {  
//show its submenu  
$('ul', this).slideDown(500);  

},
function () {  
//hide its submenu  
$('ul', this).slideUp(500);
}  
);  

  });  
</script>

<style type="text/css">

/* remove the list style */  
#nav {  
margin:0;
padding:0;
list-style:none;  
}

/* make the LI display inline */  
/* it's position relative so that position absolute */  
/* can be used in submenu */  
#nav li {  
float:left;
display:block;
width:100px;
background:#ccc;
position:relative;  
z-index:500;
margin:0 1px;  
}  

/* this is the parent menu */  
#nav li a {  
display:block;
padding:8px 5px 0 5px;
font-weight:700;
height:23px;
text-decoration:none;
color:#fff;
text-align:center;
color:#333;  
}  

#nav li a:hover {  
color:#fff;  
}  

/* you can make a different style for default selected value */  
#nav a.selected {  
color:#f00;  
}  

/* submenu, it's hidden by default */  
#nav ul {  
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;  
}  

#nav ul li {  
width:100px;
float:left;
border-top:1px solid #fff;  
}  

/* display block will make the link fill the whole area of LI */  
#nav ul a {  
display:block;
height:15px;  
padding: 8px 5px;
color:#666;  
}  

#nav ul a:hover {  
text-decoration:underline;
}  

/* fix ie6 small issue */  
/* we should always avoid using hack like this */  
/* should put it into separate file : ) */  
*html #nav ul {  
margin:0 0 0 -2px;  
}  

</style>

<ul id="nav">
<li><a href="#">Parent 01</a></li>
<li><a href="#" class="selected">Parent 02 > </a>
<ul>
<li><a href="#">Item 01</a></li>
<li><a href="#" class="selected">Item 02</a></li>
<li><a href="#">Item 03</a></li>
</ul>
<div class="clear"></div>
</li>
<li><a href="#">Parent 03 > </a>
<ul>
<li><a href="#">Item 04</a></li>
<li><a href="#">Item 05</a></li>
<li><a href="#">Item 06</a></li>
<li><a href="#">Item 07</a></li>
</ul>
<div class="clear"></div>
</li>
<li><a href="#">Parent 04</a></li>
  </ul>

  <br clear="all">