Coloring a UL menu, but each LI a different color

HTML & CSS
1

hi all…

working on my new site, i’m trying to create this effect but i’m at a loss.

my menu system is an unordered list, each link being a list item. of course i can change the default look with no issues, but i would like each mouse over to be a different assigned color. i haven’t seen this done before either… any CSS gurus out there with the answer to this one? I would appreciate it!

Here is the HTML -


<ul class="mainNav">
  <li><a href="layout3.php">Home</a></li>   
  <li><a href="123">Web Hosting</a></li>
  <li><a href="123">About Us</a></li> 
  <li><a href="123">Contact Us</a></li> 
</ul>

Here is the CSS -


ul.mainNav {
 list-style: none;
 width:213px;
 margin: 0px;
 padding: 0px;
 background-color: #FFFFFF;
 border-color: #FFFFFF;
 border-style: solid;
 border-width: 0px;
 border-bottom-width: 4px;
 }
ul.mainNav li {
 border-color: #FFFFFF;
 border-style: solid;
 border-width: 0px;
 border-top-width: 4px;
}
ul.mainNav li a:link, ul.mainNav li a:visited {
 text-indent:7px;
 background-color:#666666;
 text-decoration:none;
 color: #FFFFFF;
 display:block;
 width: 100%;
 font-size:12px;
 font-weight: bold;
 padding-top: 5px;
 padding-bottom: 5px;
}
ul.mainNav li a:hover {
 background-color: #3399FF;
 color: #FFFFFF;
}

see it in action - http://www.skattabrain.com/layout3.php

2

try

#item1 a: hover{
background color: #FFFFFF;
}

then create an id like this for the number of items on your list, then changing the background color for each one.

Then on your list just insert <li id=“item1”>

I think that will do the trick.

3

you could assign different classes to each li (safest way)


<ul>
<li class="item1">...</li>
<li class="item2">...</li>
</ul>

and style the hovers accordingly


ul.mainNav li.item1 a:hover {
 background-color: #00ff00;
 color: #FFFFFF;
}

ul.mainNav li.item2 a:hover {
 background-color: #ff0000;
 color: #FFFFFF;
}

ideally, you could also use the adjacent sibling selector


<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>



li { background-color: #f00; }
li+li { background-color: #0f0; }
li+li+li { background-color: #00f; }

but IE doesn’t understand it :frowning:

4

this isn’t working for me… but it sounds real cool… maybe the way my html is coded?


ul.mainNav li a:hover {
 background-color: #3399FF;
 color: #FFFFFF;
}
ul.mainNav li+li a:hover {
 background-color: #FF0000;
}
ul.mainNav li+li+li a:hover {
 background-color: #FF3300;
}
5

redux… your first example is working though… you’re correct… another IE thing.

i tried this earlier… maybe i need a cup of coffee cause it wasn’t working before.

thanks again!!

6