[Résolu] Impossible de cliquer sur le sous-menu !

Bonjour,

J'ai mis en forme un menu avec sous-menu déroulant, des plus classiques :

<div id="container">
<nav>
<ul class="menu">
<li><a href="#">Menu1</a>
<ul>
<li><a href="#">Sous-menu1</a></li>
<li><a href="#">Sous-menu2</a></li>
<li><a href="#">Sous-menu3</a></li>
</ul></li>
<li><a href="#">Menu2</a>
<ul>
<li><a href="#">autre sous-menu1</a></li>
<li><a href="#">autre sous-menu2</a></li>
<li><a href="#">autre sous-menu3</a></li>
<li><a href="#">autre sous-menu4</a></li>
<li><a href="#">autre sous-menu5</a></li>
</ul></li>
<li><a href="#">Menu3</a>
<ul>
<li><a href="#">dernier sous-menu1</a></li>
<li><a href="#">dernier sous-menu2</a></li>
<li><a href="#">dernier sous-menu3</a></li>
</ul></li>
</ul>
</nav>
</nav>
</div>

Le tout avec la feuille de style suivante :

*{
	font-family:"Century Gothic",Verdana,Helvetica,Arial,sans-serif;
	}
a{
    text-decoration:none;
    }
nav{
    width:950px;
    height:30px;
    margin:auto;
    background:url('../images/fondmenu.png')repeat-x;
    color:rgb(150,150,150);
    font-weight:bold;
    }
nav ul{
    list-style:none;
    display:flex;
    justify-content:space-around;
    }
nav a{
    color:rgb(100,100,100);
    text-shadow:2px 2px 3px;
    }
nav ul ul{
    display:none;
    }
nav ul li:hover ul, nav li:active ul, nav li:focus ul{
    margin-top:10px;
    padding:5px;
    position:absolute;
    display:block;
    background-color:rgb(220,220,220);
    color:white;
    }

Voici l'image "fondmenu.png" :

J'aimerais savoir ce qui cloche : sous mon navigateur Firefox 24.0, le lien des menus, contrairement à ce qui est pourtant spécifié, a une hauteur de 19px, et il est impossible d'attraper le 2ème sous-menu. D'ailleurs, en cliquant sur le menu (état "active"), le sous-menu devrait rester déroulé. Ce n'est pas le cas.

Si j'ai mis des marges sous les menus, c'est à cause de la background-image "fondmenu" pour le menu, car le sous-menu chevauche cette image si je ne mets pas de marge.

Qu'est-ce qui cloche dans ce code ? S'il vous plait ?

Salut, c'est ton margin-top dans le li:hover qui pose pb.
Joue plutôt avec un top:10px; ça sera plsu simple à gérer

artsx a écrit :
Salut, c'est ton margin-top dans le li:hover qui pose pb.
Joue plutôt avec un top:10px; ça sera plsu simple à gérer

J'ai essayé, mais alors la barre de menu est recouverte par le bloc des sous-menus ! Pourquoi les sous-menus s'affichent-ils si haut ?

Il faut lui donner un point de fixation a un élément, soit ul soit li.

Par exemple si tu dis que le ul est le point de référence (position:relative) de cette élément qui est en position absolute, le top:10px va se caser par rapport au UL, si tu met la position relative au LI il va se caser par rapport au LI, tout dépend l'effet que tu veux faire après tu ajustes le top:XXpx en fonction

Bonsoir,

lorsque tu clique sur menuX, tu clique sur un lien.
<li> ne prend pas le focus car ton click est intercepté par le lien.
Par défaut , <li> est un element qui ne reçoit ni prend le focus.

Pour que le click soit pris en compte par li , il te faut désactiver les evenements de la souris sur ce lien de premier niveau. En CSS, et si le navigateur implemente la regle, cela se regle avec : pointer-events:none;.

Pour que <li> prenne le :focus, il faut l'inclure dans les éléments qui peuvent être parcouru via la touche tab (ceux-ci prennent le focus , comme des <input/> par exemple. Pour inclure les li de 1er niveau, il faut leur ajouter l'attribut tabindex et lui attribuer la valeur 0 pour que l'ordre des element qui peuvent recevoir le focus via tab reste dans le flux.
ce qui fait pour a de premier niveau :

nav>ul>li>a {pointer-events:none;/* desactive le clique*/}

et pour les li dans le html :

<nav>
   <ul>
      <li tabindex="0"><a href="#">MenuX</a>
         <ul>
            </li> .....

http://codepen.io/gc-nomade/pen/pIGBi

Pour l'affichage de te sous menu en absolute, si tu veut qu'ils collent sous le menu, ne donne aucune marges ou indique un top a 30px, ce qui correspond exactement a la hauteur de ta barre. Pour centrer tes texte sur une ligne, ajoute un line-height équivalent a la hauteur de leur conteneur, ici : line-height:30px;

++

artsx a écrit :
Il faut lui donner un point de fixation a un élément, soit ul soit li.

Par exemple si tu dis que le ul est le point de référence (position:relative) de cette élément qui est en position absolute, le top:10px va se caser par rapport au UL, si tu met la position relative au LI il va se caser par rapport au LI, tout dépend l'effet que tu veux faire après tu ajustes le top:XXpx en fonction

Merci, Artsx, mais si je remplace la position:absolute de mon sous-menu ("nav ul li:hover ul, nav li:active ul, nav li:focus ul") par "relative", le menu, lui, (qui est en display:flex, et justify-content:space-around... ), se met à bouger : il se réajuste, à cause de la largeur du sous-menu. Et c'est pas très beau.

Et si je mets "top:42px", comme tu sembles dire, ça s'ajuste très bien, mais j'ai le même problème que j'évoquais au début : Je n'arrive pas à choper le sous-menu en-dessous, parce qu'il disparaît.

D'ailleurs, tout ça ne m'explique pas pourquoi le "display:block", qui devrait être appliqué dans le cas dans l'état :active et dans l'état :focus, ne l'est pas, alors qu'il l'est dans l'état :hover...

Continuons de chercher !...

Markos a écrit :

D'ailleurs, tout ça ne m'explique pas pourquoi le &quot;display:block&quot;, qui devrait être appliqué dans le cas dans l'état :active et dans l'état :focus, ne l'est pas, alors qu'il l'est dans l'état :hover...

Continuons de chercher !...

Je venais tout juste de répondre à cette question lorsque tu as posté, voir plus haut

@gc-nomade :

Merci pour le code sur Codepen, mais tu ne vas pas me croire : avec l'exemplaire que j'utilise (j'ai en effet changé le nom des menus et des sous-menu pour poser ma question), il y a encore des sous-menus capricieux, qui disparaissent lorsque le pointer tente de les atteindre. J'ai pourtant fait un copié-collé de ton code CSS.
Cela doit tenir à ce que tu dis sur à propos de l'élément "LI" : Par défaut , <li> est un element qui ne reçoit ni prend le focus. Il faudrait donc peut-être utiliser et formater l'élément <A> pour simplifier les choses.
Je vais essayer de reprendre tes commentaires et tes conseils et de relire mon code, parce que c'est très sympa de me fournir le code, et je t'en remercie vivement (même si comme je l'ai dit, des anomalies subsistent, donc le pb n'est pas résolu), mais le but, c'est quand même d'apprendre le CSS3, et si je n'arrive pas à analyser et comprendre le problème, on passe à côté...

Je continue de chercher..
a+

Pardon. Je corrige le message précédent : ça marche bien. Je pense que le défaut était lié au fait que j'ai ajouté des noms de classe sur Notepad, mais en fermant je me suis rendu compte que je n'avais pas sauvegardé. donc, je devais utiliser le CSS corrigé avec une structure HTML qui ne correspondait pas. Ouf !

Encore merci à gc-nomade pour le code, que je ne manquerai pas d'analyser en profondeur. Je vais donc marquer tout cela comme résolu, mais je n'ai pas dit mon dernier mot : je suis certain d'être passé à côté d'une solution beaucoup plus simple. Les menus déroulants sont si courants que je reste persuadé que c'est une affaire de débutant, et ça doit pouvoir se faire beaucoup plus simplement...