CodingForums.com - Adding a thrid level onto my navigation

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;

Code:

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:

Code:

<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>