View Full Version : Different hover color for each menu item?

May 6th, 2010, 07:31 AM
Trying to figure out how to make my horizontal menu have different hover colors for each menu item.

Here's the CSS: (currently has one hover color)

#menumoo{padding:0; margin:0;float:left; width:1000px; background:url(img/menu_bg.gif); height:32px;}
#menumoo ul{ background:url(img/menu_bg.gif); float:right; list-style-type:none; display:inline-block;height:32px;padding:0; margin:0;}
#menumoo li{float:right; display:inline-block; text-align:center; height:32px}
#menumoo li img{display:inline-block;}
#menumoo a{padding:7px 10px 5px 10px; text-decoration:none; color:#fff; background:url("img/menu_seperator.gif") bottom left no-repeat; font:Arial, Helvetica, sans-serif; font-weight:bold; font-size:12px;display:inline-block;height:20px;text-shadow: 0px 2px 3px #000;}
#menumoo a:hover{padding:7px 10px 5px 10px; color:#eee; font:Arial, Helvetica, sans-serif; font-weight:bold; font-size:12px;display:inline-block; height:20px; background:#41a0ff url("img/menu_seperator.gif") bottom left no-repeat;}

And here's the HTML:

<div id="menumoo">
<li><a href="/seasonal.php">Small Animals</a></li>
<li><a href="/reptile.php">Reptiles</a></li>
<li><a href="/deal_of_the_day.php">Fish</a></li>
<li><a href="/western.php">Birds</a></li>
<li><a href="/english.php">Cats</a></li>
<li><a href="/catalog.php">Dogs</a></li>
</div><!--end menu div-->

Thanks in advance.

May 6th, 2010, 09:12 AM
you can do like this: (using attribute selector)
#menumoo a[href^="/seasonal"]:hover {}

^= means: begin with
However, it doesn't work well in IE6 and earlier.

Also, you can add class="..." to the 'a' tag so as to distinguish them by class name instead of 'a'

May 6th, 2010, 09:29 AM
Hi, i'm just newbie too :)

i have to try make a class for

ul li a:hover.yourclass

that's use in your css :) . okay i will give you a simple way how to make any class .

list-style : none;
padding : 5 0 0 0;
float : left;
margin : 0;

ul li
list-style : none;
padding : 10 0 0 20;
float : left;
margin : 0;

ul li a
text-decoration : none;

ul li a:hover.red
color : red;

ul li a:hover.green
color : green;

ul li a:hover.yellow
color : yellow;

and this code bellow used in your html file :)

<link rel="stylesheet" type="text/css" href="css/menu.css"/>
horizontal menu hover


<!-- make horizontal menus -->
<li><a href="http://google.com" class="red"> Google </a></li>
<li><a href="http://yahoo.com" class="green"> Yahoo! </a></li>
<li><a href="http://kaskus.us" class="yellow"> kaskus </a></li>


if you have some question , you can reply to this thread again or just PM me .

hope will solve your problem . :thumbsup:

May 6th, 2010, 09:40 AM
thanks that worked!

edit: @mehere8 :)