Styling Individual Menu Items in WordPress - css

Question

I'm trying to style my WordPress Menu. I want each menu item to have a different color and the background color of all the children on pages and posts must have the background color the same as the parent text color.
What I want is the following:
- <ul id="main-menu" class="menu">
<li id="1">This is Red
<ul>
<li id="4">Background Red</li>
</ul>
</li>
<li id="2">This is Blue
<ul>
<li id="5">Background Blue</li>
</ul>
</li>
<li id="3">This is Green
<ul>
<li id="6">Background Green</li>
</ul>
</li>
- </ul>
I managed to get this right on the home page only, thinking that it would be the same for each page. But on other pages it's not reflecting as it's intended to reflect.
CSS styling for lists that has the '>' in it I am still battling to understand - I just find it confusing.
If someone could point me to a good tuturial or show me how it's done, I'd be most greatful.

Answer 1

An ID's can't start with a number, change it if you're currently using it. If there's no way to change it you can use [id='1'] {/* some css */}
The HTML
<ul class="menu">
<li id="first">This is Red
<ul>
<li>Background Red</li>
</ul>
</li>
<li id="second">This is Blue
<ul>
<li>Background Blue</li>
</ul>
</li>
<li id="third">This is Green
<ul>
<li>Background Green</li>
</ul>
</li>
</ul>
The CSS
#first {
color: red;
}
#first ul > * {
background-color: red;
color: white;
}
#second {
color: blue;
}
#second ul > * {
background-color: blue;
color: white;
}
#third {
color: green;
}
#third ul > * {
background-color: green;
color: white;
}
Here it is at work http://jsfiddle.net/9mD8z/
Hope it solves your problem.

Answer 2

just Now i found the answer for this question:)
# Appearance > Menus look top and click: Screen Options!
Then check (CSS Classes) under: Show advanced menu properties
So will display new field called CSS Classes. with each item!
Now you can target the classes you have assigned from within your stylesheet.
Regards:)
Guest!

Answer 3

I've managed to work this out for my self the styling I need to apply actually goes like this:
.jqueryslidemenu #menu-item-12 a{color: #6cd7fb !important;}
.jqueryslidemenu #menu-item-12 > ul.sub-menu {border: 1px solid #6cd7fb; border-radius: 10px; background: none repeat scroll 0 0 #6cd7fb !important;-moz-box-shadow: 8px 8px 9px #888888; -webkit-box-shadow: 8px 8px 9px #888888; box-shadow: 8px 8px 9px #888888; }
.jqueryslidemenu #menu-item-12 > ul.sub-menu li a{color:#fff!important; background-color:#6cd7fb !important;}
.jqueryslidemenu #menu-item-12 ul.sub-menu > li a:hover{
background-color:#6cd7fb !important;
border-color: #56c8f5 #65E1F7 #AEEEF9; border-image: none;
border-style: solid;
border-width: 1px;
border-radius: 15px;
box-shadow: 0 -5px 9px #AEEEF9 inset;}
This is working for me - I know I have to work on the styling the color a bit more. If anyone has a better solution, I'm all ears :)
Obviously this is just for one of the menu items - the id of the other menu items change