Different hover color for each menu item?

Aquarii

05-06-2010, 06: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)

/* HORIZONTAL MENU */
#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;}
/* END HORIZONTAL MENU */

And here's the HTML:

<div id="menumoo">

<ul>
<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>
</ul>
</div>

Thanks in advance.

mehere8

05-06-2010, 08: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'

mildfoam

05-06-2010, 08: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 .

ul
{
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 :)

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

<body>


<ul>
<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>
</ul>

</body>
<html>

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

hope will solve your problem . :thumbsup:

Aquarii

05-06-2010, 08:40 AM

thanks that worked!

edit: @mehere8 :)