Hello everyone,

I want every category menu above will be different colors,
I want one color for the "home" text, and another for "about" etc.
Even when hover on category the color change and when pressed point remains.

My css menu codes:
ul.rMenu {
padding:0 !important;
margin:0 !important;
list-style:none !important;
margin: 23px 18px 0 0px !important;

}
ul.rMenu li {
margin:15px 17px 13px 37px !important;
padding: 0px 0px 0px 0px !important;
}
ul.rMenu li a {
margin:0px !important;
padding: 0px 0px !important;
color:#626262 !important;
font:bold 14px Arial !important;
text-decoration:none !important;
border: solid 0px #FFFFFF;
border-right: 0px solid #222222;
border-left: 1px solid #222222;
}
ul.rMenu li.current_page_item a {
color: #000000 !important;
background-image: URL('/wp-content/themes/atahualpa/images/hover.png') !important;
}

div#menu1 ul.rMenu li {
background-color: transparent;
}
div#menu1 ul.rMenu {
background-color: transparent;
}
div#menu1 ul.rMenu li:hover > a,
ul.rMenu li a:hover {
color:#000000 !important;
border-right: 0px solid #aaaaaa;
background-image: URL('/wp-content/themes/atahualpa/images/hover.png') !important;
}
#menu1 {
width: 902px !important;
}

div#menu1 {
order-bottom: 0px solid #461D7C;
background-image: URL('/wp-content/themes/atahualpa/images/menu1-1.png') !important;

}

I tried to add my design code:
li.page-item-24 {
text-color: #dddddd !important;
}

li.page-item-24 a:hover {
text-color: #dddddd !important;
}

li.page-item-24.current_page a {
text-color: #dddddd !important;
}
But without success, why?

What version of Atahualpa and WP?
What is the url?
How would you rate your CSS knowledge?

Also text-color is not a correct CSS attribute. I hope that didn't come from a CSS tutorial.

Thanks for the reply,
Juggledad the WordPress version: 3.5.1
Atahualpa Version: 3.7.11
I do not have a wide knowledge in CSS, I took from your Forum the menu design .

For color, Imilesw you're right! Even when I changed it to: color: #dddddd !important; , it still did not work unfortunately.

The URL

take a look at your CSS inserts espically this part

ul.rMenu li a { 
margin:0px !important;
padding: 0px 0px !important;
color:#626262 !important;
font:bold 14px Arial !important;
text-decoration:none !important;
border: solid 0px #FFFFFF;
border-right: 0px solid #222222;
border-left: 1px solid #222222;
}

now go read this article and see if you can tell me what might be going on

First of all, there are many '!important', and there is no need them at all, right?
That's why the color code is not working?
I need to the css will look like this?

ul.rMenu li a {
margin:0px;
padding: 0px 0px;
color:#626262;
font:bold 14px Arial;
text-decoration:none;
border: solid 0px #FFFFFF;
border-right: 0px solid #222222;
border-left: 1px solid #222222;
}

so what happens if you remove the !important?

When I delete the "!important" in all the lines, it disrupts all my menu, so I deleted it only in colors lines.
and added the code, which again does not work.
Could be that there is a problem of my code?

li.page-item-24 {
color: #ff0000;
}

li.page-item-24 a:hover {
color: #ff0000;
}

li.page-item-24.current_page a {
color: #ff0000;
}

you need to use 'menu-item-nn' in place of 'page-item-nn'

To throw one other bit of info in here... If you are using the WordPress menu system you can add a class to each menu item to use for styling. If you don't see the class box on the menu you may have to enable it via the Screen Options on the menu page.

Thank you!!!
Now it works partially, how can I do that the color will remain when the category active?

I tried to add this:
li.menu-item-24 a:active {
color: #ff0000 !important;
}
But it does not work, why?

"active" mean what appears when you have a button or item clicked on (when the mouse button is activated). To have a different color when you are on that page you need to use the class for that item which can be current_page_item or current _menu_item or something of that sort. I am not sure of the exact naming but you can use Firebug to determine the "current" class for the menu tab when on that page.

to cover all cases, this is what you would need

div#menu1 ul.rMenu li#menu-item-19.current-menu-item a:link, 
div#menu1 ul.rMenu li#menu-item-19.current-menu-item a:active, 
div#menu1 ul.rMenu li#menu-item-19.current-menu-item a:hover, 
div#menu1 ul.rMenu li#menu-item-19.current-menu-item a:visited, 
div#menu1 ul.rMenu li#menu-item-19.current_page_item a:link, 
div#menu1 ul.rMenu li#menu-item-19.current_page_item a:active, 
div#menu1 ul.rMenu li#menu-item-19.current_page_item a:hover, 
div#menu1 ul.rMenu li#menu-item-19.current_page_item a:visited, 
div#menu1 ul.rMenu li#menu-item-19 a:hover {
    color: #FF0000;
}

The menu CSS is the most complicated css in teh theme, there are over 400 lines of CSS covering the menus

Thanks it works great!