jQuery menu animation

Hej

Jeg har en CSS menu som jeg gerne vil have gjort lidt mere interessant med lidt jQuery.

Min HTML er som følgende:

            <ul id="menubar">
                    <li class="main"><a class="trigger" href="#">Home</a></li>
                    <li class="main"><a class="trigger" href="#">One</a>
                        <ul>
                            <li><a href="#">Sub 1.1</a></li>
                            <li><a href="#">Sub 1.2</a></li>
                            <li><a href="#">Sub 1.3</a></li>
                            <li><a href="#">Sub 1.4</a></li>
                        </ul>
                    </li>
                    <li class="main"><a class="trigger" href="#">Two</a>
                        <ul>
                            <li><a href="#">Sub 2.1</a></li>
                            <li><a href="#">Sub 2.2</a></li>
                            <li><a href="#">Sub 2.3</a></li>
                            <li><a href="#">Sub 2.4</a></li>
                            <li><a href="#">Sub 2.5</a></li>
                        </ul>
                    </li>
                </ul>


Min idé er så at hvert undermenu skal "glide ned" i en animation. Altså når man hover over #menubar li, skal den tilsvarende undermenu "glide ned".

Jeg har selv prøvet lidt men uden held:

        $(function() {
            $('#menubar li').hover(function() {
                $('#menubar li ul').slideDown(500);
            });
       
        });

Ved denne løsning ruller alle menupunkter ned når bare man hover over en enkelt.