Jump to content

How to give each item of the navigation bar an other color?

Andreas De Rudder

Recommended Posts



I would like to give each item of the navigation bar on my wibsite an other color. How do I have to do that? Now the whole navigation bar has a black background. I have tried to use a div or a span description for each item in the menu list, but it didn't work, I had no color. Probably I did it wrong.

Could anyone give me an exemple of how I have to do it?


This is the css for my menu bar:


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