Le principe, déjà abordé ici et présenté sur de nombreux site est, par défaut, de masqué le sous-menu avec un display: none; et ensuite on le rend présent au survol de la souris sur un élément déclencheur ... généralement un item du menu principal (li).
Ce qui donne ...
- Code: Tout sélectionner
#xxxxx ul li:hover ul {
display: block;
}
J'ai remarqué que si le bloc du sous-menu (la zone défini par ...ul li ul) ne collait pas parfaitement à l'item du menu principal, ou si l'on va un peu vite avec la souris, il est possible de perdre l'affichage du sous-menu (il disparaît).
Un petit truc permet d'améliorer sensiblement les choses ... on précise que le bloc masqué est également affiché quand il est lui même survolé ...
Cela se fait en ajoutant, parmi les instructions du sous-menu, un
- Code: Tout sélectionner
#xxxxx ul li ul:hover {
display: block;
}
En gros, on provoque l'affichage du sous-menu avec l'élément déclencheur (le ...:hover vu plus haut) et on assure de l'affichage du même sous menu tant que la souris est en survol du bloc ..
