Double hover menu with JQuery?

I have a rough sliding menu as shown here:

http://www.clients.eirestudio.net/ttt/

It works for the most part but I want to be able to hover over the list and for the list not to hide away again.

Any ideas?

My code:

/*
    Sliding Main Menu
    */

    $('ul#side_menu_list').hover(function()
    {
        $(this).show();
    });

    $('span#side_menu').hover(function()
    {
        $('ul#side_menu_list').stop().animate
        ({
            left:"-=130px"},150);

        $(this).stop().animate
        ({
            left:"-=92px"},150);
        }, 
        function(){

        开发者_高级运维    $('ul#side_menu_list').stop().delay(400).animate
            ({
                left:"125px"},150);
            $(this).stop().animate
            ({
                left:"45px"},150);
    });

---

I would put them inside a wrapper

<div class="popout">
    <span id="side_menu">Click</span>
    <ul id="side_menu_list">
        <li><a href="">bingo reviews</a></li>
        <li><a href="">new bingo sites</a></li>
        <li><a href="">no deposit bingo</a></li>
    </ul>
</div>

And then make the hover function on the "popuout" class

$('.popout').hover(function()
    {
        $(this).stop().animate
        ({
            left:"-=92px"},150);
        });
    }, 
    function(){
        $(this).stop().animate
        ({
            left:"45px"},150);
        });
});

Here i would animate the single popout div, and have them placed accordingly to the layout. You could ofcourse still animate them seperatly if you would want that? :P

EDIT Then you just do (remember to have the popout class be wide enough for them to animate inside):

$('.popout').hover(function()
    {
        $('#side_menu_list').stop().animate({
                left:"-=130px"
                },150);

        $('#side_menu').stop().animate({
                left:"-=92px"
                },150);
    }, 
    function(){
        $('#side_menu_list').stop().delay(400).animate({
                left:"125px"
                },150);

        $('#side_menu').stop().animate({
                left:"45px"
                },150);
});