Realiser un menu roll-over css3

Salut, voila je peine à réaliser un menu roll-over avec un background bleu et au survol une couleur orange je met mon code:
Mon menu:

<nav id="menu" role="navigation">
    	<ul>
      		<li> <a href="Acceuil.html"class="cellules">Accueil</a></li>
      		<li><a href="Gallerie.html" class="cellules">Galerie</a></li>
      		<li><a href="artistes.html" class="cellules"title="lien">Artistes</a></li>
      		<li><a href="commentaire.php" class="cellules">Commentaires</a></li>
      		<li><a href="contact.php" class="cellules">Contact</a></li>
      		
    	</ul>
  	</nav>

le css:

#menu ul {
	text-align: center;
	background-color:#BAF3EB;
	height:40px;
	line-height:40px;
	
background:#BAF3EB;
}
#menu ul li {
	text-align: center;
	display:inline;
	margin-right: 25px;
	margin-left: 25px;
}
#menu ul li a {
  
  color:#333 ;
 
  font:  "Trebuchet MS",Arial,sans-serif ;
  text-align: center ;
  text-decoration: none ;
	}
.cellules li a:hover,.cellules li a:focus, .cellulesli a:active {
  background: #900 ;
  text-decoration:none;
}
.cellules ul li a {
	
	color:#333 ;
 
  font:  "Trebuchet MS",Arial,sans-serif ;
  text-align: center ;
  text-decoration: none ;

	
	text-align: center;
	text-decoration:none;
	
}

voila je pense qu'il y a beaucoup d'erreurs si quelqu'un peut m’éclaire merci.

Je pense que je risque d'en avoir raté mais :
.cellulesli (il manque l'espace)
Ensuite, .cellues li veut dire les <li> dans le class="cellules" or dans ton HTML, il n'y a ça nulle part, donc tout ce CSS n'est pas utilisé.
Ensuite le CSS 3 là, je le cherche mais je n'en trouve pas dans ton code.

Le title="lien" est-il nécessaire ? Ca va afficher une infobulle "lien" au survol, pas sûr que ça soit très utile...
Tu utilises <nav>, <ul>, <li>, <a>, id="menu" et class="cellules" C'est vraiment nécessaire de compliquer autant ?
Tu pourrais faire <nav id="menu"> <a>Accueil</a> <a>Machin</a>...</nav>

Et tu pourrais alors récupérer tes liens avec des règles simples et en plus ça t'éviterait de créer des blocs <li> pour les défaire derrière avec display:inline, là tu as des <a> qui sont directement inline :

 #menu a
{
   color:#333 ;
   font:  "Trebuchet MS",Arial,sans-serif ;
   text-decoration: none ;
}
#menu a:hover
{
   background: #900 ;
}

Les text-decoration dans le hover, active... n'est pas nécessaire puisqu'il est déjà dans la règle générale.

Bon, c'est qu'un début mais ça sera déjà pas mal pour commencer.

Bonjour,

Je suis d'accord avec KyleKatam dans les grandes lignes, sauf sur :

KyleKatarn a écrit :
Tu utilises &lt;nav&gt;, &lt;ul&gt;, &lt;li&gt;, &lt;a&gt;, id=&quot;menu&quot; et class=&quot;cellules&quot; C'est vraiment nécessaire de compliquer autant ?
Tu pourrais faire &lt;nav id=&quot;menu&quot;&gt; &lt;a&gt;Accueil&lt;/a&gt; &lt;a&gt;Machin&lt;/a&gt;...&lt;/nav&gt;

Pour les menus, il est préférables d'utiliser des listes, si les styles ne devaient pas s'afficher (et pour certains handicaps), c'est super pratique.

D'accord, mais dans ce cas, on pourrait probablement identifier le menu et les liens dedans par "nav ul a" ou "#menu a", on peut au moins laisser tomber les classes "cellules" et peut-être même l'id menu si c'est le seul endroit où on trouve un <ul> dans un <nav>

Les classes cellules, bien sûr. Si elle sont appliquée sur tous les éléments du menu elles ne servent à rien.