Converting single level to multilevel dropdown menu using jquery

Question

I just developed a single level dropdown menu using jquery... How to refactor the same code to make it a multilevel dropdown menu...

Here is my working sample....

The jquery what i used,

$(document).ready(function() {
$("#Programming ul.child").removeClass("child");
$("#Programming li").has("ul").hover(function() {
   $(this).addClass("current").children("ul").fadeIn();
     }, function() {
    $(this).removeClass("current").children("ul").stop(true, true).css("display",
                                                                     "none");
                              });
                            });
​

EDIT:

Menu1       Menu2
 SubMenu1    SubMenu1
 Submenu2    SubMenu2
    SubMenu21       
    SubMenu22

The second submenu level can be anywere...

Answer 1

As your code is very generic about hiding/showing the child of the list, all I did was nested another UL inside an LI element, and then positioned it according to it's parent:

http://jsbin.com/oteze/5

(No JS changes, just a new line of CSS targeting Third Level Menu items)

#Programming li ul li ul { left:100px;top:0px; }