Jump to content

How to give the active item in the navigation bar an other color

Andreas De Rudder

Recommended Posts



I would like to give the active item in the navigation bar an other color. Someone told me that I have to do it with JavaScript. Could someone give me an exemple of how I have to do it? I know nothing about JavaScript, so maybe you can give a clear exemple?


This is the css:


#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #111;

#menu li {
float: left;

#menu li a {
display: block;
color: white;
text-align: center;
padding: 7px 7px;
text-decoration: none;
font-size: 90%;

#menu a:hover {
background-color: #808080;


And this is the menu list:


<div id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="santonino.html">Santo Niño</a></li>
<li><a href="activities.html">Activities</a></li>
<li><a href="program.html">Program</a></li>
<li><a href="newsletter.html">Newsletter</a></li>
<li><a href="adresses.html">Adresses and Accessibility</a></li>
<li><a href="announcements.html">Announcements</a></li>
<li><a href="contact.html">Contact</a></li>



Thank you for helping me!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...