Multidimensional dropdown menu problem

Question

I just started making a dropdown menu: http://johanberntsson.se/dev/fysiosteo

It will have a 3 level depth. My problem is that i want to show the third level to the right side of the 2:nd level, insted of beneath it. But i dont know how to type the jquery selector for that. Any help is appreciated. Thanks

jquery:

$(function() {

        $('#menu-main-menu li').hover(function () {
                $(this).children('ul').show();
                console.log($(this).children('ul').children());
            }, 
            function () {
                $(this).children('ul').hide();          
            }
        );



    });

Html looks kinda messy when i paste it here due to generated id:s by wordpress that are kinda long, so please inspect it with firebug instead.

Answer 1

I think those third level elements need to float:left . You should'nt need to select them with jQuery in order to do that. But if you need to for some reason:

$(this).children('ul ul').css('float','left');

should work. Of course this is all very subjective, I haven't looked at your layout.