CSS Menu Current Page Highlighted

Create a CSS menu that indicates or highlights the current page:

Demo

• Home
• About us
• Contact us

HTML Code

  <ul id="secondary_menu">

  <li><a href="#" class="home">Home</a></li>

  <li><a href="#" class="about">About us</a></li>

  <li><a href="#" class="contact">Contact us</a></li>

</ul>

External CSS Code:

 
#secondary_menu{
list-style-type: none;
margin: 5px;
padding: 0;
width: 180px;
line-height:30px;
text-align:center;
}

#secondary_menu li a{
width: 180px;
text-decoration: none;
background-color:#336699;
font-size: 17px;
font-family: arial, Verdana ;
color: white;
display: block;
padding: 3px;
line-height:30px;
text-align:center;
border-bottom: 1px solid white;
}

#secondary_menu li a:visited {
color: white;
}

#secondary_menu li a:hover{
background-color:#669999;
color: #000000;
}

#secondary_menu li a:active{
color: white;
}
 

Embedded CSS Code:

#secondary_menu li a.home{
	color: #333333;
	background-color: #FFCC00;
}