Problem with script to slide left a <li> item from a menu and making links cliccable

Problem with script to slide left a <li> item from a menu and making links cliccable

Hi everybody,

what I'm trying to do is to have a vertical menu where one of the list items if triggered (click or mouseover are both fine)  moves to the right and then slides down a submenu with other 4 lists items. 

I got this working while I was just trying this effect alone thanks to this script:

  1. <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
            <script type="text/javascript">
           $(document).ready(function(){
            $("#gioca").toggle(function(){
                    //Open menu    
                   $("#gioca").stop().animate({ right: "+=100" }, 1200)    
                    $("#hidden").stop().slideDown("slow");    
              }, function(){
                    //Close menu
                    $("#gioca").stop().animate({ right: "-=100" }, 1200)    
                      $("#hidden").stop().slideUp("slow");
              });  
       });</script>











but now on the real site something goes wrong and I don't get it because on a page where I have only the menu it works.  could it be because the menu div is positioned fixed ?

here is my html

  1. <div id="over">
       
            <div id="logo">logo</div>
           
           
           
            <div id="container">
           

                <div id="menu">

                    <ul>
                        <li>paintball</li>
                        <li id="gioca"> gioca
                            <ul id="hidden">
                                <li class="submenu">Dove</li>
                                <li class="submenu">Cosa serve</li>
                                <li class="submenu">Tariffe</li>
                                <li class="submenu">Prenota</li>
                            </ul>
                        </li>
                        <li>news</li>
                        <li>foto</li>
                    </ul>
                   
                </div>
           
            </div>
    </div>
        </body>




























and my css

  1. div#over { position:absolute; margin: 0 auto; z-index: 100; width:960px; height:auto;}

    div#menu {position:fixed; width:800px; margin:350px 0px 100px 20px; height:auto; z-index: 200; padding: 0 20px 0 0;}


    div#menu li {
    text-align:right;
    list-style-type:none;
    margin: 10px 0;
    padding:4px 10px;
    background-color: #000;
    border: 1px #333;
    width: 240px;
    }


    li:hover {background-color:#9c3646;
    font-weight:bold;}



    ul { width:100%; }

    ul#hidden { display:hidden ; height:10%; overflow: visible;}
    li.submenu {width:50%;}

    li a {
    font-size:16px;
    line-height:20px;
    font-family: Arial Black, arial, sans-serif;
    text-decoration:none;
    color:#fff;}
































can you spot the problem??

also I don't know why the links of the submenu don't work. if I click it simply closes the menu.  is it because of #?

any help would really be apreciated.  and if you know another way to have the same result (<li> sliding to right and submenu appearing) would be ok too.

thanks for your time :)sl