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

[Andreas De Rudder]

Hello,

 

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

[dsonesuk]

You can give each individual menu a class name, OR use attribute selector to reference href value, OR use nth-type() to target specific menu by index.

[Andreas De Rudder]

Thank you! I've done it with a class name and it works!