CSS Menu Current Page Highlighted

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



  <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>

External CSS Code:

list-style-type: none;
margin: 5px;
padding: 0;
width: 180px;

#secondary_menu li a{
width: 180px;
text-decoration: none;
font-size: 17px;
font-family: arial, Verdana ;
color: white;
display: block;
padding: 3px;
border-bottom: 1px solid white;

#secondary_menu li a:visited {
color: white;

#secondary_menu li a:hover{
color: #000000;

#secondary_menu li a:active{
color: white;

Embedded CSS Code:

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

Category: CSS Tags: , No Comments
orlando web design company

How to add animation to a website

Orlando Web Design Company Small, simple animations are fun and interesting! They can keep your users engaged and spice... Read More »
orlando web deisgn bootstrap

Customizing Bootstrap

Orlando Web Design & Development Twitter's Bootsrap is a powerful front-end framework for faster and easier web dev... Read More »
web design orlando lesson 6

Orlando Web Design: CSS Page Layout – Understanding CSS Positioning

Orlando Web Design & Development CSS Page Layout: Understanding CSS Positioning There are 3 ways of creating CSS l... Read More »