Jump to content

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


Andreas De Rudder
 Share

Recommended Posts

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!

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