Bonjour,

Comme l'indique le sujet, le sous-menu disparaît quand on survol la souris dessus.

Testé sur plusieurs navigateurs et code vérifié scrupuleusement, surtout au niveau des sélecteurs mais rien n'y faire.

Qu'est-ce qui cloche à votre avis ?

Merci de votre aide,

Index.html

<link rel="stylesheet" href="style.css">
<div>
        <ul>
            <li class="dropdown">
                <a href="">Formations</a>
                <ul>
                    <li><a href="">Droit</a></li>
                    <li><a href="">Ressource Humaines</a></li>
                    <li><a href="">Marketing & Communication</a></li>
                    <li><a href="">Sciences informatique</a></li>
                    <li><a href="">Administration des affaires</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="">Cursus</a>
                <ul>
                    <li><a href="">Licence</a></li>
                    <li><a href="">Master</a></li>
                </ul>
            </li>
        </ul>
    </div>

style.css

div ul li {
    display: inline-block;
    position: relative;
    margin: 0 .2em;
}

div ul li a {
    display: inline-block;
    color: black;
    padding: 0.5em 2em;
    border-radius: 5px;
}

div ul li a:hover {
    background-color:#dfdbd8;
    color: #000;
}

div ul li.dropdown ul { 
    position: absolute;
    display: none; /* cache le sous menu */
    background-color: #D6B56E;
    left: -0.5em;
    border-radius: 5px;
    padding: 0.4em;
    margin-top: .9em;
}

div ul li.dropdown ul li a {
    color: #000;
    margin: 0.2em 0;
    width: 17em;
}

div ul li.dropdown:hover ul, div ul li.dropdown ul:hover  {
    display: block;  
}

Bonjour, quand on passe la souris sur le menu de niveau 1 le sous menu apparait bien, mais il disparait car tu quittes l'élément survoler qui fait apparaitre le sous-menu. Tu te trouves alors dans une zone vide.

Pour le sélecteur div ul li.dropdown ul supprime le margin-top.

Attention à l’accessibilité, vérifier également que le menu fonctionne au clavier, pour t'y aider voir https://www.frogweb.fr/ 

PS : ton <div> devrait être une balise de navigation <nav>.

Curieusement ça marche dès que j'ai enlevé le margin-top. Je l'ai définis pour mettre un espacement entre le sous-menu et le menu, comme le montre la capture, c'est plus stylé :

Dommage qu'ils soient accolés (moins design) pour que ça fonctionne.

Pourquoi décaler (ou mettre une marge supérieure) le sous-menu a un effet sur son affichage au fait ?

Existe-t-il un moyen CSS pure de les espacer en conservant la même structure HTML et CSS ? Ou faut-il changer cela ?

Bonsoir,

@Asmitta Je ne suis pas convaincu  d'un border-top dans ce cas ci.

@dagobill Cela fonctionne avec un margin-bottom sur les liens de premier niveau.

(j'ai indiqué une balise <nav> de class menu)

<nav class="menu">
    <ul>
      <li class="dropdown">
        <a href="">Formations</a>
        <ul>
          <li><a href="">Droit</a></li>
          <li><a href="">Ressource Humaines</a></li>
          <li><a href="">Marketing & Communication</a></li>
          <li><a href="">Sciences informatique</a></li>
          <li><a href="">Administration des affaires</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="">Cursus</a>
        <ul>
          <li><a href="">Licence</a></li>
          <li><a href="">Master</a></li>
        </ul>
      </li>
    </ul>
  </nav>

    .menu ul li {
      display: inline-block;
      position: relative;
      margin: 0 .2em;
    }

    .menu ul li a {
      display: inline-block;
      color: black;
      padding: 0.5em 2em;
      border-radius: 5px;
    }
  
    .menu ul li a:hover {
      background-color: #dfdbd8;
      color: #000;
    }

    .menu ul li.dropdown ul {
      position: absolute;
      display: none;
      /* cache le sous menu */
      background-color: #D6B56E;
      left: -0.5em;
      border-radius: 5px;
      padding: 0.4em;
    }

    .menu ul li.dropdown ul li a {
      color: #000;
      margin: 0.2em 0;
      width: 17em;
    }

    .menu ul li.dropdown:hover ul,
    .menu ul li.dropdown ul:hover {
      display: block;
    }
    .menu .dropdown > a {
      margin-bottom: 0.9em;
    }

Ce qui donne visuellement :

Bonsoir,

@Asmitta un border-top transparent agit comme un padding-top, il ne fait que décaler les li vers le bas. 

@Asmitta, ça marche pas. Seulement, il faudra blanchir le background de l'header. Autrement, l'espace n'est pas visible.

Je vais me contenter d'omettre le margin-top, c'est pas déjà mal comme design.

Je classe le sujet comme résolu. Merci à vous.

Bonsoir,

Il peut y avoir une solution en utilisant mix-blend-mode:screen; et un pseudo élément avec un  fond noir pour se placer au dessus de la zone de marge. 

Exemple à ajouter sur le code que tu fournis en début de sujet

 
div ul li.dropdown ul::before {
  content:'';
  position:absolute
  height:1em;/* la hauteur mini requise est égale à ta marge de 0.9em */
  width:100%;
  bottom:100%;
  left:0;
  background:black;
  mix-blend-mode:screen;/* c'est ici que le noir est remplacer avec les couleurs qui sont dessous */
}

Attention,  tester avec SAFARI et autre navigateur Apple.  MacOS à des bugs lorsqu'il s'agit de mix-blend-mode et ne fait pas toujours le mélange avec toutes les couches.

cdt

-
Edité par gcyrillus 11 novembre 2024 à 0:19:04