CSS menu selected item colour

[DJ]

Howdy!

I have a horizontal menu, thus:

Code: Select all

<div id="menu">
   <ul>
      <li><a href="1.html" accesskey="1" title="">1</a></li>
      <li><a href="2.html" accesskey="2" title="">2</a></li>
      <li><a href="3.html" accesskey="3" title="">3</a></li>
   </ul>
</div>

which has rollover colours set in the css, like so (let me know if I can streamline this, my css is still pretty basic and I muddle through):

Code: Select all

#menu {
   background-color:#000000;
   width: 896px;
   height: 28px;
   margin: 0px auto;
   font-size:10px;
}

#menu ul {
   margin: 0px;
   padding: 0px;
   list-style: none;
}

#menu li {
   display: inline;
}

#menu a {
   display: block;
   float: left;
   width: 112px;
   padding: 7px 0px;
   text-align: center;
   text-decoration: none;
   text-transform:capitalize;
   font-weight: bold;
   background: #cfa64d;
        color:#000;
}

#menu a:hover {
   background: #f3de99;
   color:#000000;
}

What I'd like is for the rollover colour to remain on the page that the user is on. Can I do that with css with a simple line of code?
There must be a simple way of doing it.
Can anyone help please?

[Blak]

Only way to do it is to add an additional class to the current menu link:

Code: Select all

<li class="menucurrent"><a href="1.html">1</a></li>
<li><a href="2.html">2</a></li>
<li><a href="3.html">3</a></li>

Code: Select all

#menu .menucurrent a { background: #f3de99; }

[DJ]

Jesus that was piss easy.
Thanks Blak, sorted!