How can I make one menu item stay active?

[jonsan32]

I'm only adding this code to a few pages. I have the background changing over each linked hover, but is there anyway for me to allow one item remain that background color to indicate which page my visitors are currently on. If you can show me how to do one, I can figure out the rest. Thanks for any help. Code below.

<style type="text/css">
 #menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 180px; border: 0px solid #ccc; margin: 10px; } #menu1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #444444; display: block; background: url(http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/menu1.gif); padding: 8px 0 0 30px; } #menu1 li a:hover, #menu1 li #current, #menu1 li a:active { color: #000000; background: url(http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/menu1.gif) 0 -32px; padding: 8px 0 0 30px; }
</style>

  <div id="menu1"> <ul> <li><a href="#1">Registration</a></li> <li><a href="#2">Change Player</a></li> <li><a href="#3">Past Champions</a></li> <li><a href="#4">Rules</a></li> <li><a href="#5">Other Stuff</a></li> </ul> 
<br>
<ul> <li><a href="#1">Other Links</a></li> <li><a href="#2">Change Player</a></li> <li><a href="#3">Past Champions</a></li> <li><a href="#4">Rules</a></li> <li><a href="#5">Other Stuff</a></li> </ul> 
<br>
<ul> <li><a href="#1">Other Links</a></li> <li><a href="#2">Change Player</a></li> <li><a href="#3">Past Champions</a></li> <li><a href="#4">Rules</a></li> <li><a href="#5">Other Stuff</a></li> </ul> 
</div>

[Airshow]

Hi Jonsan,

Typically, people set a class="selected" on the current menu, eg.:

<a href="#3" class="selected">Past Champions</a>

I generally have to play around with the CSS for a while before it behaves correctly but it will be something like this:

#menu1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; background: url(http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/menu1.gif); padding: 8px 0 0 30px; } 

#menu1 li a:link, 
#menu1 li a:visited { color: #444444; display: block; background-position: 0 0; } 

#menu1 li a.selected, 
#menu1 li a:hover, 
#menu1 li a:active { color: #000000; background-position: 0 -32px; }

I'm not sure if the a:link and a:visited directives might trump .selected on CSS "specificity" rules. If so, then try:

#menu1 li a.selected:link, 
#menu1 li a.selected:visited, 
#menu1 li a:hover, 
#menu1 li a:active { color: #000000; background-position: 0 -32px; }

I'm also not sure about display:block in your post, but I have left it in there.

Regards
Airshow

[jonsan32]

Perfect. Thanks!