Correction de style CSS pour l'élément actif

Question

Tout d'abord, je suis novice en matière de CSS et je ne comprends pas comment les classes interagissent avec les ID, c'est pourquoi je n'arrive pas à faire fonctionner le menu suivant.

<div id="navmenu"> 
    <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="index.php?=1">Menu2</a></li> 
    <li><a href="index.php?=2">Menu3</a></li> 
    </ul> 
</div> 

Ceci est mon CSS:

#navmenu ul { 
margin: 0; 
padding: 0; 
list-style-type: none; 
list-style-image: none; 
} 

#navmenu li { 
width:114px; 
text-align:center; 
float:left; 
} 

#navmenu ul li a { 
text-decoration:none; 
color: white; 
background: #CE140B; 
} 

#navmenu a { 
padding-top:4px; 
padding-bottom:4px; 
display:block; 
width:100%; 
} 

#navmenu ul li a:hover { 
color: #CE140B; 
background: white; 
} 

Cela change arrière-plan et couleur de premier plan lorsque la souris survole un élément de menu.

Maintenant, je voulais ajouter une classe active à cela, de sorte que lorsque je suis sur la page d'accueil, l'élément de menu Home est le même que lorsqu'il est survolé. Le code suivant ne fonctionne pas.

J'ai essayé de changer le menu à ceci:

<li><a class="active" href="#">Home</a></li> 

et aussi

<li class="active"><a href="#">Home</a></li> 

et mon CSS:

#navmenu ul li a:hover a:active { 
color: #CE140B; 
background: white; 
} 

et

#navmenu ul li a:hover li:active { 
color: #CE140B; 
background: white; 
} 

Aucune des deux ne fonctionne. Merci de votre aide pour que cela fonctionne.

Answer 1

Soit

li.active:hover { 

} 

Ou

a.active:hover { 

} 

devrait fonctionner