Menu orizz: colore hover diverso per ogni voce

[gianpy81]

Salve a tutti e Buone Feste!

Volevo avere un consiglio, come posso fare in modo che il mio menu orizzontale abbia un colore diverso per ogni voce?

Il sito è allweb360 dot com ed ogni link del menu è un vero è proprio sito di terzo livello. Attualmente quando si passa il mouse su una voce esce sempre lo stesso colore (ovvero grigio chiaro per la home page, rosa per il blog moda, arancione per ideeregalo e azzurrino per calcio).

Attualmente il codice css del menu è il seguente:

#navigation{font:8px/8px Helvetica, Arial, sans-serif; font-weight: bold; margin-top: 0px; padding: 130px 0;}

#navigation ul.rss{background:url(images/ico-rss.png) no-repeat right 5px;padding:6px 15px 3px 0;margin-right:10px;}
#navigation ul.rss li{display:inline;padding:0 10px 0 0;}
#navigation ul.rss li a{color:#c63f00;text-decoration:none;}
#navigation ul.rss li a:hover{text-decoration:underline;}

.nav { z-index:99; margin:0; padding:0; list-style:none; line-height:1; }
.nav a  { position:relative; color:#666; display:block; z-index:100; padding:11px 21px 6px 21px; line-height:18px; text-decoration:none; text-shadow:0 1px 0 #fff; text-transform: uppercase;}
.nav a:hover,
.nav li.current_page_item a,
.nav li.current_page_parent a,
.nav li.current-menu-ancestor a,
.nav li.sfHover { color: #1b5474; background: #CECECE; border-top-right-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; }
.nav li  { float:left; width: auto; background: url(images/nav-li.png) no-repeat top left; }

Mentre il richiamo nell'header è il seguente:

		<div id="navigation">
			<?php
			if ( function_exists('has_nav_menu') && has_nav_menu('primary-menu') ) {
				wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'main-nav', 'menu_class' => 'nav fl', 'theme_location' => 'primary-menu' ) );
			} else {
			?>	        
            <ul id="main-nav" class="nav fl">
				<?php
	        	if ( isset($woo_options['woo_custom_nav_menu']) AND $woo_options['woo_custom_nav_menu'] == 'true' ) {
	        		if ( function_exists('woo_custom_navigation_output') )
						woo_custom_navigation_output();
				} else { ?>
		            <?php if ( is_home() || is_front_page() ) $highlight = "page_item current_page_item"; else $highlight = "page_item"; ?>
		            <li class="<?php echo $highlight; ?>"><?php _e('Home', 'woothemes') ?>
		            <?php
		    			wp_list_pages('sort_column=menu_order&depth=6&title_li=&exclude=');
				}
				?>
	[/list]
	        <?php } ?>
		</div>

P.s: il sito è fatto in wp...

[ResianTaxidrive]

mah, a sto punto credo che ti convenga semplicemente utilizzare l'identificatore che viene assegnato a quei menu e fare una cosa tipo:

#navigation .nav li#menu-item-8 a:hover{
color:#quellochevuoi;
}

e lo fai per ogni menu usando il suo identificativo.Chiaro che se per qualche motivo rifai i menu, molto probabilmente cambieranno gli id e la cosa non funzionerà e dovrai cambiare la regola css.

Altrimenti provi con i css3 e usi il sistema del nth-of-type ma non avrai compatibilità con tutti i browsers.