Question

Basically what i am trying to achieve is having the ul menu on the left side of my content div, at the start only one li should be visible.
Once clicked it has to slide out or a sort of animation and be replaced by 4 li that contain the different navigation

(function($){
    $(function(){

        $('li.dropdown').click(function() {
            $(this).fadeOut('slow')
                    .siblings('li.stage2').css('display', 'block');
        });
    });
})(jQuery);

this currently does it but the siblings coming in isn’t smooth and when the fadOut animation is over they jump in the place of the other, any help would be appreciated.

EDIT
Not a drop down menu.

Answer 1

Kindly take a look at this code. I built your code fragment and came up with this.

CSS:

ul { width: 200px; margin: 20px 0 0 20px; }
li { color: #fff; text-align: center; background-color: #000; border-bottom: 1px dotted #fff; }
li.stage2 { background-color: #0000ff; display: none; }

​

HTML:

<ul id="menu">
    <li class="dropdown">First Stage Menu</li>
    <li class="stage2">Second Stage - 1</li>
    <li class="stage2">Second Stage - 2</li>
    <li class="stage2">Second Stage - 3</li>
    <li class="stage2">Second Stage - 4</li>
</ul>

JS:

$(document).ready(function() {
    $('li.dropdown').click(function() {
        $(this).animate({opacity:0},1000);
        $(this).siblings('li.stage2').fadeIn(1000);
        $(this).parent().animate({marginTop: '-=20'},1000);
    });​
});

See it in action here: http://jsfiddle.net/P9TQA/1/
Good luck.