Wordpress mulit-level dropdown

programming
1

I am having a hard time making a multilevel drop down in wordpress and I was wondering if someone could shed some light on it for me.

I have got a menu working currently and it works as a drop down like:

>Home
>products
>propd1
>prod2
>about

But I want to use page catagories so that it would go:

I am having a hard time making a multilevel drop down in wordpress and I was wondering if someone could shed some light on it for me.

I have got a menu working currently and it works as a drop down like:

>Home
>products
cat 1
>propd1
>prod2
cat2 (just the words and no link)
>prod3
>about

I am currently doing this:
jQuery:

 <script type="text/javascript">
jQuery(document).ready(function($) {
$("#nav ul").css({display: "none"}); // Opera Fix
$("#nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(); },function(){ $(this).find('ul:first').css({visibility: "hidden"}); });  </script>

Html

<ul id="nav">
	<? wp_list_pages('title_li=&sort_column=menu_order'); ?>	
</ul>

css

/*navigation*/
#nav {padding:0;margin:0;}
#nav li {position:relative;display:block;float:left;z-index: 90;}
#nav li a {display:block;float:left;height:23px;line-height:23px;padding: 0 20px;color:#999;text-decoration:none;font-size:12px;margin-right:5px;margin-left:5px;}
#nav li a:hover {background-color: #2e2e2e;color:#ff3333;}
#nav li ul li a {background-color: #2e2e2e;font-size:10px; color:#fff;}
#nav li ul li a:hover {background-color: #ff3333;color:#fff;}

/*sub navigation*/
#nav ul {position:absolute;top: 23px;left:0;padding:0; width:200px;} /*the top:30px command must be the same height as your parent LI so the dropdown displays below the main navigation*/
#nav ul a, #nav ul li {float:none;}

Sorry I know this is a long post but hopefully someone will know what I am meaning as I think Im just missing something simple.