CSS style fix for active element

Question

First of I am new to CSS and don't seem to understand how classes interact with id's, thats why I can not get the following menu to work.

<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>

This is my 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; 
}

This changes background and foreground color when the mouse is hovered over a menu item.

Now i wanted to add an active class to this, so that when I am on the Home page, the Home menu item looks the same as when it is hovered. The following code does not work.

I have tried changing the menu to this:

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

and also

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

and my CSS to:

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

and

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

Neither works. Thanks for your help on getting this to work.

Answer 1

Either

li.active:hover {

}

Or

a.active:hover {

}

Should work