The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS/WordPress menu problem

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #29043

    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.

    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;

    .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;

    .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{

    .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:

    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.