Jump to content

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


Andreas De Rudder
 Share

Recommended Posts

Hello,

 

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">
<ul>
<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>
</ul>

</div>

 

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
 Share

×
×
  • Create New...