Adding a thrid level onto my navigation

[stephen_]

I'm trying to add another level to a navigation bar - alls fine except I cant change the javascript so that the 3rd level menu only shows when hovering over the 2nd level menu link

The scipt behind the 2nd level hover is;

var mylib =
{
	dropDown :
	{
		init : function()
		{
			$(".sub-nav").hide();
			$(".sub-nav li:last-child").addClass("last");
			$("#nav > li").hover(function(){
				$(this).addClass("active");
				$(".sub-nav",this).show();
			},
			function(){
				$(this).removeClass("active");
				$(".sub-nav",this).hide();
			});
			
			$("#sub-nav a").click(function () {
	            $("#sub-nav").hide();
	        });
		}
	}
}

The html is:

<ul id="nav">
   <li id="1" class="first"><href="#">level 1 menu</a>
      <ul class="sub-nav">
         <li><a href="n.htm">level 2 menu</a>
              <ul class="sub-sub-nav">
                    <li><a href="#.htm">level 3 menu</a></li>
                    <li><a href="#.htm">level 3 menu</a</li></ul>
</li>
</ul>
</li>
</ul>