Sous sous menu en css qui s'affichent ensemble

benj2263630 Messages postés 1 Date d'inscription mercredi 31 août 2022 Statut Membre Dernière intervention 31 août 2022 - 31 août 2022 à 16:46
Raymond PENTIER Messages postés 57133 Date d'inscription lundi 13 août 2007 Statut Contributeur Dernière intervention 18 mars 2023 - 31 août 2022 à 19:39

Bonjour,

J'ai beau tourné le code dans tous les sens je n'y parviens pas. Je vous met le code.

Lorsque je passe sur réalisations puis paceX ou codeur.com, les deux sous menus apparaissent ensemble.

J'aimerais qu'ils apparaissent indépendament.

Merci d'avance pour votre aide.

code html:

<nav>
  <ul>
    <li class="menu-deroulant">
      <a href="#">Services</a>
        <ul class="sous-menu">
          <li><a href="#">Graphisme</a></li>
          <li><a href="#">Web & App</a></li>
          <li><a href="#">Marketing</a></li>
        </ul>
      </li>
    <li class="menu-deroulant">
      <a href="#">Réalisations</a>
        <ul class="sous-menu">
          <li><a href="#">SpaceX</a></li>
            <ul id="ss-menu1">
              <li><a href="#">Web & App</a></li>
              <li><a href="#">Marketing</a></li>
              <li><a href="#">Marketing22</a></li>
              <li><a href="#">Marketing22</a></li>
            </ul>
          <li><a href="#">Codeur.com</a></li>
            <ul id="ss-menu2">
              <li><a href="#">Web22 & App</a></li>
              <li><a href="#">Marketing22</a></li>
              <li><a href="#">Marketing22</a></li>
              <li><a href="#">Marketing22</a></li>
              <li><a href="#">Marketing22</a></li>
            </ul>
          </ul>
      </li> 
    <li><a href="#">À propos</a></li>
</nav>

code css:

:root{
  --hauteur-menu: 60px;
  --largeur-menu: 10px;
}

* {
  margin: 0px;
  padding: 0px;
  font-family: Montserrat, sans-serif;
}

nav {
  width: 100%;
  font-size: 18px;
  position: sticky;
  top: 0;
}

nav > ul {
  display: flex;
  text-align: center;
  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.3);
  height: var(--hauteur-menu);
}

nav ul {
  list-style-type: none;
}

nav > ul > li {
  background-color: white;
  position: relative;
  height: 100%;
  flex: 2;
}

nav > ul > li:hover > a{
  color: #2169EC;
}

nav > ul > li > a {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, 50%);
}

li a {
  text-decoration: none;
  color: black;
}

.menu-deroulant > a:after{
  content: '❯';
  font-size: 15px;
  margin-left: 7px;
  display: inline-block;
}

.menu-deroulant:hover > a:after{
  animation: rotationFleche 0.2s linear forwards;
}

@keyframes rotationFleche {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(45deg);
  }
  100%{
    transform: rotate(90deg);
  }
}


.sous-menu {
  margin-top: var(--hauteur-menu);
  width: 99.9%;
  overflow: hidden;
  max-height: 0;
  border-radius: 2px;
  background-color: white;
}

.menu-deroulant:hover > .sous-menu {
  animation: apparitionSousMenu 2s forwards;
}

@keyframes apparitionSousMenu {
  0% {
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0);
    border-top: 3px solid #2169EC;
  }
  30% {
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
  }
  100% {
    max-height: 50em;
    border-top: 3px solid #2169EC;
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
  }
}

.sous-menu > li:hover {
  background-color: rgba(33, 105, 236, 0.3);
}

.sous-menu > li > a {
  align-items: center;
  display: flex;
  height: 50px;
  padding-left: 20px;
}

.sous-menu > li:hover > a {
  color: white;
}
#ss-menu1 > li > a {
  align-items: center;
  display: flex;
  height: 50px;
  padding-left: 20px;
  width: 100%;
}

#ss-menu1 {
  width: 25%;
  overflow: hidden;
  max-height: 0;
  border-radius: 2px;
  background-color: white;
  position: absolute;
  top: 100%;
  right: 100%
}
 
.sous-menu:hover > #ss-menu1 {
  animation: apparitionSsMenu1 1s forwards;
}

@keyframes apparitionSsMenu1 {
  0% {
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0);
    border-top: 3px solid #2169EC;
  }
  30% {
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
  }
  100% {
    max-height: 50em;
    border-top: 3px solid #2169EC;
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
  }
}

#ss-menu2 > li > a {
  align-items: center;
  display: flex;
  height: 50px;
  padding-left: 20px;
  width: 100%;
}

#ss-menu2 {
  width: 25%;
  text-align:center;
  overflow: hidden;
  max-height: 0;
  border-radius: 2px;
  background-color: white;
  position: absolute;
  left: 100%;
  top: 100%;
}
.sous-menu:hover > #ss-menu2 {
  animation: apparitionSsMenu2 5s forwards;
  display : visible;
}
@keyframes apparitionSsMenu2 {
  0% {
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0);
    border-top: 3px solid #2169EC;
  }
  30% {
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
  }
  100% {
    max-height: 50em;
    border-top: 3px solid #2169EC;
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
  }
}


#ss-menu1 > li:hover {
  background-color: rgba(33, 105, 236, 0.3);
}
#ss-menu2 > li:hover {
  background-color: rgba(33, 105, 236, 0.3);
}

#ss-menu1 > li:hover > a {
  color: white;
}
#ss-menu2 > li:hover > a {
  color: white;
}

1 réponse

Raymond PENTIER Messages postés 57133 Date d'inscription lundi 13 août 2007 Statut Contributeur Dernière intervention 18 mars 2023 17 162
31 août 2022 à 19:39

Bonjour.

https://www.commentcamarche.net/infos/25843-guide-d-utilisation-du-forum-de-commentcamarche-net/#plateformes-d-assistance


C'est bien, la retraite ! Surtout aux Antilles ... 
Raymond (INSA, AFPA)

0