CSS Menu Current Page Highlighted

m5 design studio logo

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

Demo

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

 
Category: CSS Tags: , No Comments

Author

M5 Design Studio

We are a small, but creative and passionate team of designers and developers specializing in web design, graphic design, branding & digital marketing.


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

Comments are closed.