Convert one level to multi-level dropdown using jquery

Question

I just designed a single-level drop-down menu using jquery ... How to reorganize the same code to make it a multi-level drop-down menu ...

Here is my working sample ....

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 level of the submenu can be any ...

Answer 1

Here is my solution: http://jsbin.com/oteze/9 I tested it on Firefox 3.6.8. ADD: Now it works in IE7 too.

You can attach any number of submenus at any time. Similar:

<li><a href="#">Child 1.2</a>
   <ul class="child">
       <li><a href="#">Child 1.2.1</a></li>
       <li><a href="#">Child 1.2.2</a></li>
   </ul>                                                      
</li>

, . show/hide JS.

   $(document).ready(function() {

        $("#Programming ul.child-first-level").hide();
        $("#Programming ul.child").hide();

        $("#Programming ul.child").each(function(index) {
            $(this).css("margin-left", $(this).parent().css("width"));
        });


        $("#Programming li ul.child-first-level").parent().hover(
            function() {
                $(this).children("ul").fadeIn();
            },
            function() {
                $(this).children("ul").stop(true, true).css("display", "none");
            }
        );

        $("#Programming li ul.child").parent().hover(
            function() {
                var offset = $(this).children("ul").offset();
                offset.top = 0;
                $(this).children("ul").offset(offset);
                $(this).children("ul").css("margin-left", $(this).parent().css("width"));
                $(this).children("ul").fadeIn();
            },
            function() {
                $(this).children("ul").stop(true, true).css("display", "none");
            }
        );

   });

Answer 2

/ , , , UL LI, :

http://jsbin.com/oteze/5

( JS, CSS )

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

Answer 3

, jquery, ?

: http://users.tpg.com.au/j_birch/plugins/superfish/

Suckerfish JS, , .

, , .