Partage
  • Partager sur Facebook
  • Partager sur Twitter

Mon menu déroulant ne se déroule pas

HTML/CSS

    1 février 2020 à 16:52:49

    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 !

    • Partager sur Facebook
    • Partager sur Twitter
      Staff 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.

      • Partager sur Facebook
      • Partager sur Twitter

      Mon menu déroulant ne se déroule pas

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      • Editeur
      • Markdown