Résolu Erreur dans un code HTML ou CSS

  • Auteur de la discussion Auteur de la discussion Matthieu D.
  • Créé le Créé le
M

Matthieu D.

Je viens de coder en HTML et CSS un menu déroulant pour un site web !
Mais le problème c'est que j'ai dis de masquer les sous-catégories et quand on passe la souris sur une catégoris ses sous menus apparaissent !
Mais les sous menus reste apparent tout le temp aidez-moi pleaze !

CODE HTML :
HTML: 
<html>
    <head>
        <meta charset="utf-8">
        <title>menu deroulant</title>
        <link rel="stylesheet" href="style.css">
    </head>
      <body>
          <nav>
              <ul>
              <!--categorie principale-->
                  <li class="menu-html"><a href="html.html">HTML</a>
                      <ul classe="submenu">
                      <!--4 catégories secondaires-->
                        <li><a href="#">Cours complet HTML et CSS</a></li>
                        <li><a href="#">Référence des éléments HTML</a></li>
                        <li><a href="#">Références des attributs HTML</a></li>
                        <li><a href="#">Exemples et exercices</a></li>
                      </ul>
                    </li>
                    <!--categorie principale-->
                  <li class="menu-css"><a href="css.html">CSS</a>
                      <ul classe="submenu">
                      <!--3 catégories secondaires-->
                        <li><a href="#">Cours complet HTML et CSS</a></li>
                        <li><a href="#">Référence des propriétés CSS</a></li>
                        <li><a href="#">Exemples et exercices</a></li>
                      </ul>
                    </li>
                    <!--categorie principale-->
                  <li class="menu-javascript"><a href="javascript.html">JavaScript</a>
                      <ul classe="submenu">
                      <!--2 catégories secondaires-->
                        <li><a href="#">Cours complet JavaScript</a></li>
                        <li><a href="#">Exemples et exercices</a></li>
                      </ul>
                    </li>
                    <!--categorie principale-->
                  <li class="menu-contact"><a href="contact.html">Contact</a></li>
              </ul>
          </nav>
    </body>
</html>



CODE CSS :
Code: 
body{
    font-family: "Trebuchet MS";
    margin: 0px;
    padding: 0px;
}

nav{
    width: 100%;
    background-color: #424558;
}

nav > ul{
    margin: 0px;
    padding: 0px;
}

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

nav > ul > li{
    float: left;
    position: relative;
}

nav > ul > li > a{
    padding: 20px 30px;
    color: #FFF;
}

nav > ul >li:hover{
    padding: 15px 30px 20px 30px;
}

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

/*Ne pas montrer le submenu*/
/*le problème est ici*/
.submenu{
    display: none;
}

nav a{
    display: inline-block;
    text-decoration: none;
}

nav li:hover .submenu{
    display: inline-block;
    position: absolute;
    top: 100%;
    left: 0px;
    padding: 0px;
    z-index: 1000;
}

.submenu{
    border-bottom: 1px solid #CCC;
}

.submenu li a{
    padding: 15px 30px;
    font-size: 13px;
    color: #222538;
    width: 270px;
}

.menu-html:hover{
    border-top: 5px solid #e44d26;
    background-color: RGBa(228, 77, 38, 0.15);
}

.menu-css:hover{
    border-top: 5px solid #0070bb;
    background-color: RGBa(000, 112, 192, 0.15)
}

.menu-javascript:hover{
    border-top: 5px solid #f1dc4f;
    background-color: RGBa(241, 211, 79, 0.15);
}

.menu-contact:hover{
    border-top: 5px solid #BBB;
    background-color: RGBa(220, 220, 220, 0.15);
}

.menu-html .submenu{
    background-color: RGB(230, 100, 40);
}

.menu-css .submenu{
    background-color: RGB(000, 160, 240);
}

.menu-javascript .submenu{
    background-color: RGB(250, 215, 100);
}

.submenu li:hover a{
    color: #EEE;
    font-weight: bold;
}

.menu-html .submenu li:hover{
    background-color: RGB(210, 77, 60);
}

.menu-css .submenu li:hover{
    background-color: RGB(000, 115, 200);
}

.menu-javascript .submenu li:hover{
    background-color: RGB(250, 165, 75);
}


screenshot :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.



Merci d'avance !
​
 
Trier par date Trier par votes
Retour
Haut