...

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



Aquarii
05-06-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)



/* 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">
<!--NAVIGATION-->
<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><!--end menu div-->


Thanks in advance.

mehere8
05-06-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'

mildfoam
05-06-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 .



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>

<!-- make horizontal menus -->
<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, 09:40 AM
thanks that worked!

edit: @mehere8 :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum