Menu Jquery Horizontal [RESOLU]

Bonjour,

je viens vous demander un peu d'aide pour mon menu. J'ai suivis le tuto sur votre site pour réaliser un menu déroulant en JS avec Jquery cependant j'ai quelques soucis mineurs :

http://www.g-arena.fr/site/news/news.php

Comme vous pouvez le constater quand on clique sur le 2 ou le 3 les autres descendent vers le bas alors que j'aimerais que le tout reste horizontal donc que les 4 liens restent bien en haut.
J'aimerais aussi que quand le menu se déroule le reste du site descende.

Voici le code CSS et HTML utilisé :

		#navigation {
			margin: 0;
			padding: 0;
			list-style: none;
			background: transparent url(images/menu.png);
			color: #fff;
			text-align:center;
			text-decoration:none;
			text-transform:capitalize;
			width: 800px;
			height: 35px;
			font: 2.0em "Trebuchet MS", sans-serif;
			}
		#navigation li {
			display:inline;
		}
		#navigation a, #navigation span {
			padding: 4px 10px;
			color: #fff;
			text-decoration: none;
			}
		#navigation .toggleSubMenu a, #navigation .toggleSubMenu span {
			background-image: url(menu-item-deroule.png);
			}
		#navigation .open a, #navigation .open span {
			background-image: url(menu-item-enroule.png);
			}
		#navigation a:hover, #navigation a:focus, #navigation a:active {
			text-decoration: underline;
			}
		#navigation .subMenu {
			font-size: .8em;
			background: #ccc url(subMenu.png) 0 0 repeat-x;
			font-size: .9em;
			margin: 0;
			padding: 0;
			border-bottom: 1px solid #666;
			}
		#navigation ul.subMenu a {
			background: none;
			padding: 3px 20px;
			}

    
                   <ul class="navigation"> 
 <ul id="navigation">
        <li><a href="" title="">Item 1</a></li>
        <li class="toggleSubMenu"><span>Item 2</span>
            <ul class="subMenu">
                <li><a href="" title="">Item 2.1</a></li>
                <li><a href="" title="">Item 2.2</a></li>
                <li><a href="" title="">Item 2.3</a></li>
            </ul>
        </li>
        <li class="toggleSubMenu"><span>Item 3</span>
            <ul class="subMenu">
                <li><a href="" title="">Item 3.1</a></li>
                <li><a href="" title="">Item 3.2</a></li>
            </ul>
        </li>
        <li><a href="" title="">Item 4</a></li>
    </ul>    
 
</ul>
   

    <script type="text/javascript">
    <!--
    $(document).ready( function () {
        // On cache les sous-menus
        // sauf celui qui porte la classe "open_at_load" :
        $("ul.subMenu:not('.open_at_load')").hide();
        // On selectionne tous les items de liste portant la classe "toggleSubMenu"
    
        // et on remplace l'element span qu'ils contiennent par un lien :
        $("li.toggleSubMenu span").each( function () {
            // On stocke le contenu du span :
            var TexteSpan = $(this).text();
            $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '</a>') ;
        } ) ;
    
        // On modifie l'evenement "click" sur les liens dans les items de liste
        // qui portent la classe "toggleSubMenu" :
        $("li.toggleSubMenu > a").click( function () {
            // Si le sous-menu etait deja ouvert, on le referme :
            if ($(this).next("ul.subMenu:visible").length != 0) {
                $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
            }
            // Si le sous-menu est cache, on ferme les autres et on l'affiche :
            else {
                $("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
                $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
            }
            // On empêche le navigateur de suivre le lien :
            return false;
        });
    
    } ) ;
    // -->
    </script>

Merci
Modifié par JobS (13 Jul 2010 - 19:56)

UP plz

Toujours personne pour me donner un ti coup de main svp ?

Merci pour tes réponses cependant le menu ne décalle toujours pas le contenu quand je clique sur le 2ème ou le 3ème qui eux se déroulent. C'est justement pour ça que j'ai plusieurs ul qui se suivent

Sinon pour tes liens le deuxième est pas mal mais payant
Pour l'animation ce n'est pas encore la version finale je veux d'abord trouver comment descendre le contenu du site quand le menu se déroule

Merci encore

[EDIT] J'ai réussi à faire le décalage, merci je passe en résolu
Modifié par JobS (13 Jul 2010 - 19:56)