Bonjour à tous,

Depuis plusieurs mois je travaille sur un site qui à pour but de présenter des films, séries, personnages et tout un tas de bonus. Pour naviguer je pense le faire via un menu alphabétique.


Depuis vendredi soir j'essaie de modifier le CSS d'un menu horizontal que j'ai trouvé ici http://www.devinrolsen.com/pure-css-horizontal-menu/ pour qu'il corresponde à mes besoins. J'ai un peu tout bidouillé pour voir quel élément changeait l'affichage des sous menus et je dois avouer que là je sèche...

Pour le moment ça donne ça: http://ddstv.fr/liste-series Un menu horizontal alphabétique aligné à gauche avec des sous menu horizontaux qui sont décalés en fonction de leur lettre.

J'aimerais:
- centrer sur ma page le premier niveau du menu (0,a , b, c...)
- faire apparaître les sous menu en cliquant dessus et qu'ils restent affichés jusqu'à ce qu'on clique ailleurs (plus pratique pour la recherche surtout qu'il y aura beaucoup de choix dans les sous-menus)
- aligner tous les sous menus (quelque soit la lettre à laquelle ils sont liés) au même endroit, sur la gauche de la page comme une liste.

Pour le moment j'ai déjà réussi à faire tenir un de mes liens de sous menu sur une seule ligne en faisant en sorte qu'ils aient une largeur de 1000 px. J'ai commencé à commenter les éléments que j'ai trouvé.

Est-ce que l'un d'entre vous pourrait m'expliquer quels éléments sont à toucher? Car je ne sais pas à quoi ils correspondent. Après je me débrouille toute seule.

Voila mon code:

#navigation{
width:1000px;
height:30px;
background-color:#999; /*couleur du fond du 1er niveau*/
}

#navigation ul
{margin:0px; 
padding:0px;
}



#navigation ul li
{display:inline;
height:30px;
float:left; 
list-style:none;
margin-left:20px; /*espacer les lettres*/
position:relative;
}


#navigation li a
{color:#fff; 
text-decoration:none;}

#navigation li a:hover
{text-decoration:underline;}


#navigation li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:20px;
background-color:#999; /*couler du fond du second niveau*/
}

#navigation li:hover ul
{
display:block;
width:1000px;
}

#navigation li li
{
list-style:none;
display:list-item;
width:100%;
}


#navigation li li a
{color:#fff; 
text-decoration:none;}

#navigation li li a:hover
{text-decoration:underline;}

Je vous remercie d'avoir lu mon message.

Bonne journée.

Bonjour à tous!

Je fais sans cesse ma fouineuse et j'ai trouvé mieux et plus simple: un tableau avec des éléments caché qui apparaissent en cliquant dessus avec du jquerry.
Si ça interesse quelqu'un voir la le lien du tutoriel : http://www.entheosweb.com/tutorials/css/tabs.asp