Question

i’m building a page, which will have categories that will contain a list of pages to go with them. at first all the list are hidden, and than I click on a category and the list slides down. this is the code of the script:

    $(document).ready(function() {
            $('.menu-list').hide();
            $('.menu-title').click(function() {
                if ($(this).next().is(':not(:visible)')) {
                    $('.menu-list:visible').slideUp();
                    $(this).next().slideDown();
                }
     });

The script works, but the problem is when I’m clicking on a category in a column that has more categories than the other. than the last category is moving to the left and I don’t want it to. Here is the code in jsfiddle: http://jsfiddle.net/U7rKX/4/

Can you help me?

Answer 1

You have to clear the floats if you want to third menu float always to the right border.

This is because all menus are floated to the right. As long as they have the same height, the second menu will float beside the first. The third have nothing in this row so it will be positioned at the right side. But if the first menu slide out, there is something in the row of the third menu now. So the third menu will float beside the first.

Here is a working fiddle: http://jsfiddle.net/U7rKX/6/