CSS Menu Current Page Highlighted

m5 design studio logo

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


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.