[Résolu] Probleme "hover:" par bastienjeux - page 1

Hello les codeurs,

Voila j'ai un problème avec mes fonctions CSS ":hover". En effet rien ne se passe alors que normalement les menus devraient ce mettre en surbtillance ect... Voici le code HTML:

<html lang="fr-FR"><!--Cela va donner une indication aux moteurs de recherche sur la langue utilisée dans nos pages web -->
<meta name="viewport" content="width=500, initial-scale=1"><!--pour mettre nos pages à l’échelle-->


<header class="header">
  <h1>BASTIEN</h1>
</header>

<nav>
  <div class="table">
    <ul>
      <li class="menu-exp">
        <a href="#exp">Experience</a>
      </li>
      <li class="menu-about">
        <a href="#about">About</a>
      </li>
      <li class="menu-contact">
        <a href="#contat">Contact</a>
      </li>
    </ul>
  </div>
</nav>  

<footer>
  <p>Copyright 2017 Bastien</p>
</footer>

Voici le CSS :

body{
  font-family:"Century gothic",Calibri, serif;
  font-size: 13px;
  margin: 0px;/*On effectue un reset CSS des marges intérieures et extérieures de notre élément body afin d’avoir le même rendu sur tous les navigateurs*/
  padding: 0px;
}
h1{
  font-size:40px;
  font-weight:normal;
  text-align:center;
}
header{
  height:100px;
}
footer{
  height:80px;
  padding-top:30px;
  text-align:center;
  background-color:#C5C5C5;
  border-top:3px solid #AAA;
}
nav li{
  list-style-type: none;/*enlevé les puces des <ul>*/ 
}
nav ul{
  margin: 0px;/*reset des marges*/
  padding: 0px;
}
nav{
  widht: 300%;
  background-color: #424558;
}
nav a{
  display: inline-block;/*on change le type de nos éléments a en inline-block afin de leur appliquer un gros padding. Cela va avoir pour effet d’aérer notre menu tout en gardant tout l’espace autour du texte cliquable.*/
  text-decoration:none;/*enlever les deco (ex souligner) des liens*/
  padding: 20px 30px;
  color: #FFF;/* couleur des liens*/
  text-transform: uppercase;/*Liens en Majuscule*/
  font-size: 15px;/*grosseur des caractères*/
}
.table{ /*on centre le menu dans notre page*/
  display:table;
  margin: 0 auto;
}
.menu-exp: hover{
  border-top:5px solid #4c8;
  background-color: RGBa(64,200,130,0.15);
}
.menu-about: hover{
  border-top:5px solid #0070bb;
  background-color: RGBa(000,112,192,0.15);
}
.menu-contact: hover{
  border-top:5px solid #ee44d26;
  background-color: RGBa(228,77,38,0.15);
}

Comme vous pourrez le constater, c'est avec les 3 dernières fonctions de CSS que j'ai un problème (les "hover")...

Avez vous une idée de mon erreur de code?

Merci pour vos réponses.

Probleme "hover:"

Probleme "hover:"

Supprimer

Modérer

Signaler le message aux modérateurs