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?