[Résolu] Menu en accordeon horizontal

Bonjour je rencontre actuellement un problème, j'ai crée un menu en accordéon avec jQuery a l'aide du tutoriel d'alsacreations et je n'arrive pas à le mettre à l'horizontal.

Voici mon code html:

 <ul class="navigation">
    <li><a href="acceuil.html" title="L'acceuil du site">Acceuil</a></li>
	
    <li><a href="#" title="Le blog d'eric maby">Blog</a></li>
	
    <li class="toggleSubMenu"><span>Arts Numériques</span>
        <ul class="subMenu">
            <li><a href="#" title="Aller à la section 3D">3D</a></li>
            <li><a href="artsplastiques.php" title="Aller à la section Arts Plastiques">Arts Plastiques</a></li>
            <li><a href="webdesigns.php" title="Aller à la section Webdesigns">Webdesigns</a></li>
			<li><a href="autres.php" title="Aller à la section autres">Autres</a></li>

        </ul>
    </li>
	
    <li class="toggleSubMenu"><span>Arts Traditionnels</span>
        <ul class="subMenu">

            <li><a href="artsplastiques2.php" title="Aller à la section Arts Plastiques">Arts Palstiques</a></li>
            <li><a href="croquis.php" title="Aller à la section Croquis">Croquis</a></li>
			<li><a href="autres2.php" title="Aller à la section Autres">Autres</a></li>

        </ul>
    </li>
	
    <li><a href="liens.php" title="Aller à la page des liens">Liens</a></li>
	
	<li><a href="contact.html" title="Pour me contacter">Contact</a></li>

</ul> 

et mon code css:

.navigation {
      margin-left: 170px;
	  margin-top: -10px;
      list-style: none;
      background: #fff;
      color: #fff;
      width: 200px;
	  height : 10px;
      font: 0.90em "Trebuchet MS", sans-serif;
	  display : block;
      }
   .navigation a, .navigation span {
      display: block;
      padding: 4px 10px;
      color: #000;
      text-decoration: none;
      background: #fff url(menu-item.png) left bottom no-repeat;
      }
   .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;
      }

Je vous fourni le lien de mon site pour vous rendre compte de ce que cela donne: http://www.mabart.fr.nf/mabartnew/acceuil.html

voila une image pour vous montrez le résultat que j'aimerai obtenir:



Je vous remercie d'avance
Modifié par funkyfresh (22 Jan 2009 - 20:53)

Bonjour,

Ce menu n'est pas prévu pour être disposé horizontalement. Tu n'arriveras probablement à rien en bidouillant à partir du code donné dans ce tutoriel.

Ce que tu cherches à faire est à priori un menu déroulant horizontal. Aucun menu de ce type n'est proposé sur Alsacréations, mais tu peux éventuellement voir du côté de Superfish (plugin jQuery) par exemple. Attention: c'est très casse-gueule à mettre en place si on ne maitrise pas le positionnement CSS, ou si on n'a aucune notion de JavaScript.

Ah okay merci de ta réponse, vu que je ne connais pas du tout j'avascript ça va être problématique. je vais essayer de trouver un autres tutos sur le net sinon au pire je reverrait la position du menu.

Essaye de mettre ce code la dans le fichier menu.css :
ul {
padding:0;
margin:0;
list-style-type:none;
}
li
{
margin-left:2px;
float:left; /*pour IE*/
}
ul li a
{
display:block;
float:left;
width:100px;
background-color:#6495ED;
color:black;
text-decoration:none;
text-align:center;
padding:5px;
border:2px solid;
/*pour avoir un effet "outset" avec IE :*/
border-color:#DCDCDC #696969 #696969 #DCDCDC;
}
ul li a:hover
{
background-color:#D3D3D3;
border-color:#696969 #DCDCDC #DCDCDC #696969;
}
en modifiant les couleurs pour adapter.

Tieno a écrit :
Essaye de mettre ce code la dans le fichier menu.css :

Dit, et toi tu ne voudrais pas essayer de présenter correctement le code que tu proposes ?
Pour conserver une bonne lisibilité des messages sur le forum, il est demandé d'utiliser les balises code pour présenter le code source des exemples.
Pourrais-tu éditer ton message pour te conformer à cette règle de mise en forme ?
Merci d'avance.

Merci j'ai résolu mon probleme
Modifié par funkyfresh (28 Jan 2009 - 17:47)