Question

I’m working on a WordPress theme using Thematic. Everything was going fine until I started playing around with the sub menu.

You can see the site in development here: http://yem.synaxistech.net/

Ok, so here is my CSS issue. If you go to the site above, and hover over the “Home” button, you will see a sub menu pop up. That is exactly how I would like the menu to look.

However, if you “click” on home, and go to that page (http://yem.synaxistech.net/?page_id=17), and once again hover over the same button, you will see the sub menu buttons have a background image behind them, which I can’t for the life of me get rid of!

Here is a picture:

https://i.stack.imgur.com/SQhwS.jpg

On the left, you can see the “correct” format, but on the right, the background is appearing when on the specific page. It is somehow being inherited by the main menu, and I just can’t seem to over ride it.

Can anyone please help me out here? I’ve spent the past three hours trying to figure this out with no avail.

Thanks in advance!

Answer 1

Find these style:

.sf-menu li.current-menu-item a,
.sf-menu li.current_page_item a {
    background-image: url(images/navbutton-hover.png);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: left -2px;
}

And there’re two ways to solve this problem:

Way A:
You can replace:

.sf-menu li.current-menu-item a,
.sf-menu li.current_page_item a

with:

.sf-menu li.current-menu-item > a,
.sf-menu li.current_page_item > a

or Way B:
You can add these style:

.sf-menu li.current-menu-item ul a,
.sf-menu li.current-menu-item ul a {
        background-image: none;
}

The menu are structured as follows:

• ul (main menu)
  • li (main item)
    • a (main item link)
    • ul (sub menu)
      • li (sub item)
        • a (sub item link)

So the original selector .sf-menu li.current-menu-item a can select all sub item links and cause the problem you meet.