28172 sujets

CSS et mise en forme, CSS3

Problème menu déroulant

Bonjour à tous

J'ai un petit problème avec mon menu déroulant

Je voudrais faire un menu avec un menu à trois niveau (menu, sous-menu, sous-sous menu).

J'ai réussi à intégrer le sous-menu : lorsque la souris passe sur un onglet du menu, les éléments du sous menus apparaissent et disparaissent lorsque le curseur de la souris n'est plus dessus.

J'ai essayé de refaire la même tentative pour le sous-menu (en passant sur un élément du sous-menu, les éléments du sous-sous menu apparaissent puis disparaissent lorsque le curseur de la souris n'est plus dessus).

Cependant je n'arrive pas à masquer les éléments du sous-sous menu ou alors lorsque j'arrive à les faire disparaitre, le fait de passer la souris sur l'un des items du sous-menu ne les fais pas s'afficher.

Voici mon code :

<HTML>
<HEAD>
<meta charset ="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Idylle bourgeoise</title>
<script src="https://kit.fontawesome.com/5c79d10849.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&display=swap" rel="stylesheet">
<style>

  .header {
    background-color : white;
    width: 100%;
    margin: 0 auto;
    position: flex;
    top: 0px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    font-family: 'Arial', serif;
  }

  aside {
    float : right;
    color : black;
  	background-color : #7EF2E7;
  	opacity : 0.8;
  	border-radius: 10px;
    margin-right: 10%;
    margin-top : 20px;
    margin-left : 10%;
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
  }

  .site-description {
    text-align: center;
  }

nav{
    width: 104%;
    margin-left: -49px ;
    margin-right: -100px ;
    background-color: #44A6A6;
    position: sticky;
    top: 0px;
}

nav ul{
    list-style-type: none;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 0px;
    padding-bottom: 0px;
}

nav ul li{
    float: left;
    width: 14.2%;
    text-align: center;
    position: relative;
    margin : auto;
}

nav ul::after{
    content: "";
    display: table;
    clear: both;
}

nav a{
    display: block;
    text-decoration: none;
    color: black;
    border-bottom: 2px solid transparent;
    padding: 10px 0px;
    color : white;
    font-family: 'Arial', serif;
}
/*fait apparaitre un block de couleur quand on passe sur un élément*/
nav a:hover{
    color: black;
    background-color: #7EF2E7;
    border-bottom: 2px solid black;
}

.sous{
    display : none; /*masque les sous éléments*/
    box-shadow: 0px 1px 2px #CCC; /*met le cadre des sous éléments en reliefs*/
    background-color: white;/*definit la couleur */
    position: absolute;
    width: 100%;
    z-index: 1000;
}
nav > ul li:hover .sous{
    display: block; /*fait apparaitre les éléments de sous*/
}
.sous li{
    float: none;
    width: 100%;
    text-align: left;
    border-top : thin dotted black;
}
.sous a{
    padding: 10px;
    border-bottom: none;
    color : black;
}
.sous a:hover{
    border-bottom: none;
    background-color: RGBa(200,200,200,0.1);
}
.deroulant > a::after{
    content:"?";
    font-size: 12px;
}

.conteneur{
  margin: 50px 20px;
  height: 1500px;
}
article{
  float : right;
  color : white;
  background-color : black;
  opacity : 0.8;
  border-radius: 10px;
  margin-right: 10%;
  margin-top : 30px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.search-container {
  margin-top : 10px;
}
.sous-sous{
    display : none; /*masque les sous éléments*/
    box-shadow: 0px 1px 2px #CCC; /*met le cadre des sous éléments en reliefs*/
    background-color: white;/*definit la couleur */
    position: absolute;
    width: 100%;
    z-index: 1000;
}
nav > ul li:hover .sous{
    display: block; /*fait apparaitre les éléments de sous*/
}
.sous-sous li{
    float: none;
    width: 100%;
    text-align: left;
    border-top : thin dotted black;
}
.sous-sous a{
    padding: 10px;
    border-bottom: none;
    color : black;
}
.sous-sous a:hover{
    border-bottom: none;
    background-color: RGBa(200,200,200,0.1);
}
.deroulant-sous > a::after{
    content:"?";
    font-size: 12px;
}
  </style>

</HEAD>
<BODY>
  <div class="header">
          <a href=""><img src="../Accueil/logo.jpg" height="105px" width="245px"></a>
          <aside><p class="site-description">Bienvenue sur le site de valorisation d'une collection de photographies issues du fonds Joseph Mauran,photographe amateur et bourgeois rural de la Belle Epoque.</p></aside>
<article>Espace</br>enseignant</article>
  </div>
  <div class="menu">
  <ul>
    <nav>
<ul>
  <li ><a href="#"><i class="fas fa-home"></i>&ensp;Accueil &ensp;</a>
  <li ><a href="#">Joseph Mauran &ensp;</a>
  </li>
  <li class="deroulant"><a href="#">Decouvrir la Belle Epoque &ensp;</a>
    <ul class="sous">
      <li class="deroulant-sous"><a href="#">Evénements Historiques</a></li>
        <ul class="sous-sous">
          <li><a href="#">Exposition maritime internationale</a></li>
          <li><a href="#">Exposition universelle</a></li>
          <li><a href="#">Guerre</a></li>
        </ul>
      <li class="deroulant-sous"><a href="#">Manifestations Sociales</a></li>
          <ul class="sous-sous">
          </ul>
      <li class="deroulant-sous"><a href="#">Innovations Technologiques</br></a></li>
          <ul class="sous-sous">
          </ul>
      <li class="deroulant-sous"><a href="#">Style de vie</a></li>
          <ul class="sous-sous">
          </ul>
      <li class="deroulant-sous"><a href="#">Photomontages</a></li>
      <li class="deroulant-sous"><a href="#">Vêtements</a></li>
          <ul class="sous-sous">
          </ul>
    </ul>
  </li>
  <li><a href="#">Cartes postales</br> </a></li>
  <li class="deroulant"><a href="#">Jeux &ensp;</a>
    <ul class="sous">
      <li><a href="#">Quizz</a></li>
      <li><a href="#">Memory</a></li>
      <li><a href="#">Bonus</a></li>
    </ul>
    </li>
  <li class="deroulant"><a href="#">A propos &ensp;</a>
    <ul class="sous">
      <li><a href="#">Qui sommes nous</a></li>
      <li><a href="#">Mission et projet</a></li>
      <li><a href="#">Bibliographie</a></li>
    </ul>
    </li>
  <li>
        <div class="search-container">
      <form action="#">
        <input type="text" placeholder="   Rechercher..." name="search">
        <button type="submit"><i class="fas fa-search"style="font-size:16px; padding-top:1px ; padding-bottom: 1px;"></i></button>
      </form>
          </div>
  </li>
</ul>
</nav>

  </ul>
</div>

</BODY>
</HTML>


Est-ce que vous verriez d'ou viendrais le problème ?

Je vous remercie d'avance pour vos réponses et vos solutions Smiley smile
Sujet clos
Aller à