Navigation par Menus et sous menus

Bonjour à tous,
J'ai ce bout de code CSS qui normalement devrait me construire des sous-items à partir de l'item 3

#nav { 
list-style : none; 
margin : 0; 
padding : 0; 
overflow : hidden; 
background-image : url("images/men2.gif"); 
height:50px;
} 
#nav ul{
Margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#nav li { 
float : left; 
width : 138px; 
color : #fff; 
} 
#nav li a { 
display : block; 
color : #336699; 
font-family : "Trebuchet MS", Times New Roman, Times, sans-serif; 
font-weight : normal; 
font-style : bold  italic; 
line-height : 1em; 
padding : 4px 0; 
text-align : center; 
text-decoration : none; 
width:100px;
}
#nav li a :hover{
color:#ffd700;
}
#nav ul li ul{
display:none;
position:absolute;
}
#nav ul li :hover ul
{
display:block;
color:#ffd700;
}
#nav li:hover ul li 
{
float:none;
}
#nav li ul {
position:absolute;
}

et cela ne fonctionne pas.
Quelqu'un pourrait-il me dire ce qui ne fonctionne pas.

Merci

Hello PascalBar,

Le code css ne construisant pas grand chose mais ne faisant que la mise en forme, je pense qu'il serait utile que tu montres, en surplus, le code (x)html sur lequel tu t'appuies afin que chacun puisse te venir en aide.

Oui
Pardon le voilà

<div id="nav">
<ul>
<li><a href="1.html" title="1">/ 1 /</a></li>
<li><a href="2.html" title="2">/ 2 /</a>
<ul>
      <li><a href="Toto.html">Toto 1</a></li>
      <li><a href="#">Toto 2</a></li>
      <li><a href="#">Toto 3</a></li>
</ul>
</li>
<li><a href="3" title="3">/3 /</a></li>
</ul>
</div>

Merci

Bonjour,

Tes sélecteurs du type élément (espace) :hover sont à priori faux. Tu voulais sans doute écrire élément:hover?

Notons par ailleurs que ce type de menu déroulant réalisé grâce à la pseudo-classe :hover posera les problèmes suivants:
- non compatible IE6;
- pas accessible au clavier;
- sous-menus pas lisible avec un lecteur d'écran s'ils sont cachés par défaut dans la feuille de styles avec un display: none;
- un peu casse-gueule à utiliser si on n'a pas un parfait contrôle du pointeur de la souris (et personne n'a un tel contrôle, surtout si on a un léger problème de motricité ou tout simplement si on utilise un touchpad plutôt qu'une souris).
Modifié par Florent V. (08 Dec 2008 - 16:05)

C'est à dire???

Donc le plus simple serait d'abandonner ce type de menus, mais je vais avoir un menu"Normal" hyper long

PascalBar a écrit :
Donc le plus simple serait d'abandonner ce type de menus, mais je vais avoir un menu"Normal" hyper long

Ou bien faire une structure avec deux menus:
1. Navigation globale, avec lien vers page d'accueil et vers les différentes rubriques.
2. Navigation locale, spécifique à chaque page ou rubrique.

Ça peut se présenter de différentes manières. Notamment:

1. Un menu global horizontal en haut de page, et un menu local vertical dans une colonne à gauche (sur la page d'accueil, on récupère cet espace de gauche pour afficher plus de contenus).
2. Un menu global horizontal en haut de page, et un menu local horizontal juste en dessous. Un peu comme le menu sur lemonde.fr, mais avec un sous-menu qui s'affiche lors du changement de page et pas lors du survol par la souris (sur lemonde.fr, c'est un système de menu déroulant avec une disposition horizontale des deux niveaux... et c'est inutilisable ou presque).
3. Un menu global vertical à gauche, au sein duquel on affiche le menu local une fois arrivé sur une page de rubrique. Peut aussi se faire avec un menu qui contient déjà tous les contenus, cachés par défaut, et affichés lors du clic sur les intitulés de rubrique grâce à JavaScript. Voir sur Alsacréations, dans les tutoriels, l'exemple de menu en accordéon.