CSS/WordPress menu problem

[alexg]

Hi,
I am only on my second ever wordpress site for a client. I have all the theme ready and the design approved but i am just finding it hard to achieve what I designed.
I have 6 pages as my main navigation and on rollover they colour green, what I want to achieve is each page a separate roll over colour and then on the active page the be highlighted in that colour. And also the drop down menu to macth.

Hope that makes sense. Here is a link to the current state of the site and a screen shot of what i’m after.

http://accessinfoservice.com/test

Also here is the CSS code for the menu: (the image name just changes at the end _green, _orange etc

.li_active, .navigation ul .active, ul.navigation li.current_page_item, ul.navigation li.current_page_parent {
background: #fff url(../../images/1/menu_button_green.jpg) right top no-repeat;
color:#fff;
}

.navigation ul li .a_active, .navigation ul .active a, ul.navigation li.current_page_item a, ul.navigation li.current_page_parent a{
background: #fff url(../../images/1/menu_button_green.jpg) left top no-repeat;
color:#fff;
}

.navigation ul li ul li, ul.navigation li ul li.current_page_item, ul.navigation li ul li.current_page_parent{
background: transparent url(../../images/1/drop_down_middle_green.png) left repeat-y;
}

ul.navigation li.current_page_item ul li a, ul.navigation li ul li a, ul.navigation li.current_page_parent ul li a, ul.navigation li ul li.current_page_parent a{
background:none;
color:#fff;
}

.navigation ul .active ul a{
background: none;
}

/*first ul background*/
.navigation ul li .first_ul{
background: transparent url(../../images/1/drop_down_bottom_green.png) bottom left no-repeat;
}

.navigation ul.navigation li ul .first_li{
background: transparent url(../../images/1/drop_down_top_green.png) top left no-repeat;
}

Many thanks for anyone that can help.

Alex :D

[Andy Staple]

Easiest way I can think of is to give a #id to each main <li>

so something like:

Code:

li#about {
background: #fff url(../../images/1/menu_button_orange.jpg) left top no-repeat;
}

li#register {
background: #fff url(../../images/1/menu_button_pink.jpg) left top no-repeat;
}

giving each main list item a new id, then targeting each #id with its own colored background image. It’s quite a bit of CSS code, but should work just fine.

Hopefully you know what I mean, if not let me know and I can explain it in more detail.

[Author]

Posts