Mon menu déroulant ne se déroule pas

Bonjour à tous,

Je vous écris car mon menu déroulant ne se déroule pas. J'ai même copié/collé le code css et html d'un tiers mais ça ne rend pas l'effet escompté de mon coté. Je ne sais pas du tout comment faire. Je vous poste mon code css et mon code html, peut-etre trouverez vous une solution à ce problème que je ne vois pas.

Voici le code CSS

/*reset CSS*/

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


}

nav{

	width: 100%
	margin:0 auto;
	background-color: white;
	position:sticky;
	top:0px;


}


nav ul {
	list-style-type: none;


}


nav ul li {
	float: left;
	width: 25%;
	text-align: center;

}

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;
}

nav a:hover{
	color:orange;
	border-bottom: 2px solid gold;


}

.sous {

	display: none;
	box-shadow: 0px 1px 2px #CCC;
	background-color: white;

}	

nav > ul li:hover .sous{
	display: block;

}

.sous li{
	float: none;
	width: 100%;
	text-align: left;

}


.sous a {
	padding: 10px;
	border-bottom: none;

}

.sous a:hover{
	border-bottom: none;
	background-color: rgba(200, 200, 200, 0.1);
}


.deroulant > a::after{
	content:"▼"
	font-size:12px;


}

.sous {
	display: none;
	box-shadow: 0px 1px 2px #CCC
	background-color:white;
	position: absolute;
	width: 100%;
	z-index: 1000;

}

nav > ul li:hover .sous{
    display: block;
}
.sous li{
    float: none;
    width: 100%;
    text-align: left;
}
.sous a{
    padding: 10px;
    border-bottom: none;
}
.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;
}

Et voici le code HTML :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title></title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="menu.css" type="text/css"/>
  </head>




  <body>

    <header>
      <h1><center>Welcome</center></h1>
      <h1><center><font face="Garamond">Bienvenu</font></center></h1>
    </header>

    <nav>
      <ul>
        <li class="deroulant"><a href="#">Accueil &ensp;</a></li>
          <ul class="sous"> 

          </ul>


        <li class="deroulant"><a href="#">Bibliothèque &ensp;</a></li>
          <ul class="sous">

         </ul>
        
        <li class="deroulant"><a href="#">Espagnol &ensp;</a></li>
          <ul class="sous">
              
          </ul>

        <li class="deroulant"><a href="#">Annuaire &ensp;</a></li>
          <ul class="sous">

          </ul>
      </ul>

     </nav>
  

  </body>
</html>

J'espère que vous pourrez m'aider, merci d'avance !

samad18

1 février 2020 à 16:52:49

AbcAbc6

1 février 2020 à 18:34:27

Bonsoir, ton HTML n'est pas correct, passe le au validateur pour voir et corriger tes erreurs => https://validator.w3.org/

En premier lieu <center> et <font> sont obsolète depuis 1999. A supprimer de toute urgence, c'est en CSS que l'on centre.(Et pour quelles raisons 2 <h1>? )

Seul la balise <li> est enfant direct de <ul> ou <ol>, donc tes <ul> de class sous ne peuvent être à cet endroit.

vas voir http://www.frogweb.fr/ pour avoir un exemple de comment il faut faire.

HTML/CSS

Mon menu déroulant ne se déroule pas

Supprimer

Modérer

Signaler le message aux modérateurs