Highlight current Webpage link using CSS

Hello to everyone at sitepoint! One of my favorites websites! I have searched for help here in the past and I was happy for getting it fast and reliable!!

So I have some minor issues trying to create a higlighted current link using CSS only and a class .active.

Please if anyone has experience in that area help me because I really need it!

<div id="rightcol">

  			  <h2>Website Links:</h2>
               <div id="navlist">
		           <li class="active"><a href="#">Home</a></li>
		           <li><a href="Rooms_price_list.html">Rooms and Price List</a></li>
		           <li><a href="">Triton Cafe</a></li>
		           <li><a href="">Photo Album</a></li>
              <!--end navlist-->
		  </div><!--end rightcol-->

And CSS is

#navlist {
	color: #333333;
	font-family: Georgia, "Times New Roman", Times, serif;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 2px;
	margin: 0px;
	font-weight: bold;
#navlist ul {
	text-align: left;
	margin: 0;
	padding: 0;
	list-style-type: none;
#navlist li {
	margin: 0px;
	padding: 0px;
	white-space: nowrap;
	line-height: 180%;
#navlist a {
	padding-top: 2px;
	padding-right: 5px;
	padding-left: 2px;
	padding-bottom: 2px;
	text-decoration: none;
	border-left-width: 7px;
	border-left-style: solid;
	border-left-color: #333333;
	background-color: #CCCCCC;
#navlist a:link {
	color: #333333;

#navlist a:visited {
	color: #333333;
#navlist a:hover {
	background-color: #FFFFFF;
#navlist ul li.active a, #navlist ul li.active a:hover {
	background-color: #FFFFFF;

If you need anything else I will provide it shortly!

Which browser is this not working in? All? IE only? I can see IE not working because you ahve not invoked hasLayout.

Add this to your stylesheet

* html #navlist li a{height:1%;}

Only the fist link works by having a white background color. I want to change that white background when you click a different link for easiest navigation but it does not work in all web browsers. I don’t know what I am doing wrong.

[b]#navlist a:visited [/b]{
	color: #333333;

You set it to a shade of grey…on hover you set it to white but not for clicking

#navlist a:hover {
	background-color: #FFFFFF;

Yes but I am having trouble setting a working active link highlight.
When I click on “Rooms and Price list” link I want to change its background to white and the “Home” link to return to grey shade.

I want the .active class to follow the current active link.

try this arrangement

a:link {color: #FF0000}     /* unvisited link */
a:visited {color: #00FF00}  /* visited link */
a:hover {color: #FF00FF}   /* mouse over link */
a:active {color: #0000FF}   /* selected link */

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

good luck.

Your code seems to be working fine. The trouble I’m guessing is that you want the link to change depending on the page. You can do this with javascript or PHP, or there’s a quick and dirty way to do it with CSS.

Set an ID on every <a> element. So

<li><a href="page1.html" id="page1Link">Page 1</a></li>
<li><a href="page2.html" id="page2Link">Page 2</a></li>

Then set a class on the body element, the UL, or any parent element of the UL. I usually set <body class=“page1”>. Set a different class for every page. So if the other page is page2.html, set body class=“page2”

Then go into your CSS and do

.page1 #page1Link, .page2 #page2Link
{ background-color: #fff;}

Notice that you can use the same rule for every identifier.

Yup thanks for your time.

But I cam across with this certain way:
http://clagnut.com/sandbox/csstabs/?writingtext=csstabs but I do not understand it well.

How can he set that .here class in one <li> element and follow each page link without doing anything else. It’s driving me crazy!

Note that in the above link I want to create one navbar only!

Never mind. I did it with your suggestion vanishdesign and with a little help over the internet it worked. I also added a body tag to each and every web page and everything works sweet!