Active menu state

Problems getting the active menu to function

[Siler007A]

Hi,

I ahve searched the internet andthese pages and tried a few solutions. I can get the active menu to flash the colours I have chosen, but it will not stay active (highlighted to show the visitor they are currently on that page).

Here is my html and css
HTML

<ul id="navlist">
  <li><a href="http://www.mysite.co.uk/Index.html" >Home</a></li>
  <li id="active"><a href="http://www.mysite.co.uk/Transcription-Services.html" id="current">Transcription Services</a></li>
</ul>

CSS

#navcontainer {
width : 170px;
margin : 0 0 20px 0;
}
#navcontainer ul {
margin-left : 0;
padding-left : 0;
list-style-type : none;
}
#navcontainer a {
display : block;
padding : 3px;
width : 163px;
border-bottom : 1px solid #eee;
background : #369;
color : #eee;
}
#navcontainer li {
display:inline;
}
#navcontainer li a:link, #navlist li a:visited {
color : #eee;
background : #369;
text-decoration : none;
}
#navcontainer li a:hover {
background : #036;
color : #fff;
}
#navcontainer li a:active {
background : #00FFFF;
color : #fff;
}
#navcontainer li a:current {
background : #00FFFF;
color : #fff;
}

Thanks for any help.

[simonuk]

Two options:

You need to create and style an active .class (or #id) so the CSS knows which one is the active LI

e.g.

<ul>
<li class="active">This one is active</li>
<li>This one isn't</li>
</ul>

You would have to specify on each page which one is the active LI.

Second method is to use JavaScript or JS/XML to control the behaviors.

[Siler007A]

Hi

Thanks for the reply. I thought I had already created and styled the "active" link as shown in the html and css segments I pasted into my message.

Can you explain where I am going wrong please.

Thanks a lot

[simonuk]

You're setting the rules in stone earlier on. Don't be quite so strict on what's going on and things get easier :-)

#navcontainer a {
display : block;
padding : 3px;
width : 163px;
border-bottom : 1px solid #eee;
background : #369;
color : #eee;
}
#navcontainer li {
display:inline;
}
#navlist li a:visited {
color : #eee;
background : #369;
text-decoration : none;
}
#navcontainer li a:hover {
background : #036;
color : #fff;
}

li#active a {background-color:#00CC66;}