CSS Menu Which Highlights Current Selection

Question

Hi,
I'm trying to convert my table and frame-based site to use CSS.
http://www.jchmusic.com
OK, the menu at the left works fine except that I'd like it to behave a bit differently; more like a real 'application' if possible.
When the user clicks on a menu, I want that menu selection to -remain- highlighted (or a different color or -something-) to indicate where the user is on the web site. Then, when the user clicks on another menu option, I want that to 'de-select' and the next menu choice to be highlighted.
I hope that makes sense. In effect, I want the page to have a 'memory' to act as a visual indicator for the user.
I've seen all kinds of CSS menus, but few that do this. And the ones I've seen which -do- work like this have style sheets that are -far- too complex for me to suss out on my own. What's the 'trick'? Is there javascript involved? Session Variables? Or is this something that can be done with only CSS (which is my deep hope.)
TIA,
---JC

Answer 1

If you want just the current page that you are visiting to be different, assign it an id as in "here".
If this is your sidebar links and the example uses <ul><li> as the example below:
<div id="sidebar1">
<div class="sidenav">
      <h1>Link Header </h1>
<ul>
<li><a href="#" id="here">Link One</a></li>
<li><a href="/#">Link Two</a></li>
    <li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
<li><a href="#">Link Six</a></li>
</ul>
</div>
</div>
Then the css would be:
#sidebar1 {
     float: left;
     width: 150px;
     padding: 15px 5px 15px 5px;
     margin-left:10px;
.sidenav h1,.sidenav ul {
     padding-left: 5px;
.sidenav {
     background: #cccccc;
     float: left;
     width: 150px;
.sidenav h1 {
     color: #ffffff;
     font-size:1em;
     height: 20px;
     background-color:#990000;
.sidenav ul {
     border-top: 1px solid #fafafa;
     margin: 0;
     padding: 0;
.sidenav li {
     border: 1px solid #fafafa;
     border-top: none;
     list-style: none;
     margin: 0;
.sidenav li a {
     color: #000000;
     display: block;
     font-size: 0.9em;
     padding: 3px 6px 3px 14px;
     text-decoration: none;
     background-color:#efefef;
     border-left: solid 5px #ffffff;
.sidenav li a:hover {
     color: #ffffff;
     background-color:#996600;
.sidenav li a:visited {
     text-decoration:underline;
.sidenav a#here {
    border-left-color: #900 !important;
    background-color: transparent !important;
    color: #0074A5 !important;