verticaal dropdown menu with mouseover

verticaal dropdown menu with mouseover

hello all,

Im working on a vertical naviagtion menu with mouseenter and mouseleave events. Im quite new 2 jquery and cant get it working 100%.
check the menu at: http://www.testrtistik.nl/tests/jquery/menu/.

purpose:
when nav-item has childs (sub-nav-items), I want them to rollout by mouseenter. This works. I want the sub-items rollup when leaving the sub-items div ( <div class="sub-nav-items">) OR when leaving the parent of the child items ( <a href="#" class="parent">pagina2</a>).

problem:
With my code sofar I could only let the sub items rollup by leaving the sub-items div.

my html+js:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function() {

   $('div.nav-item a').each(function(){
      if($(this).hasClass("parent")){
         $(this).mouseover(function(){
            $(this).next().slideDown(500);            
         });         
      }
   });

   $('div.nav-item div.sub-nav-items').mouseleave(function(){
      $(this).slideUp(500);      
   });   

});
</script>
</head>
<body>
<div id="nav">

   <div class="nav-item">

     <a href="#">pagina1</a>
   </div>
   <div class="nav-item">
     <a href="#" class="parent">pagina2</a>
       <div class="sub-nav-items">
           <a href="#">sub pagina2.1</a>
           <a href="#">sub pagina2.2</a>

           <a href="#">sub pagina2.3</a>
           <a href="#">sub pagina2.4</a>          
       </div>   
   </div>
   <div class="nav-item">
     <a href="#">pagina3</a>
   </div>
   <div class="nav-item">

     <a href="#">pagina4</a>
   </div>

</div>
</body>
</html>


any help is very appreciated!
thanks