Thread

I’m completely stumped - I’ve spent 2.5 hours trying to iron out just this one issue. If you look here you’ll see a nav bar - hover over photos and the dropdown appears like normal. However the background for home doesn’t swap out. I’ve been trying every possible thing I could imagine and even some I can’t imagine. Nothing works.

The image that should swap out appears over the subnav items on hover (I’ve got a class commented out that stops that from happening)

Here is the relevant CSS

/***************first tab hover fix stuff**********************/

#mainnav .sf-navbar .home {
    background:     url('images/menu_tab1.png') no-repeat transparent;
}
#mainnav .sf-navbar  .home  li:hover  {
    background:     url('images/menu_tab1_selected.png') no-repeat transparent;
    border: 5px dashed red; /*delete outline after fixed*/
}
/*
#mainnav #subphotos li:hover {
background: none;
}
*/
/****************end first tab hover fix stuff********************/

The problem you have is on line 137 of superfish-navbar.css

#mainnav .sf-navbar .home

This rule is more specific than the one that triggers on hover:

.sf-navbar li

so it wins! If you remove the #mainnav from the front of it, it should work as you want it to.

that’s a partial fix - it’s replacing with the background for the other tabs, not the left one which has rounded corners.

I thought that the code below should work - and it does appear when you hover over the sub-items but not over the main item itself

#mainnav .sf-navbar  .home  li:hover  {
    background:     url('images/menu_tab1_selected.png') no-repeat transparent;
    border: 5px dashed red; /*delete outline after fix*/
}

Here’s how I used Firebug to find this out, by the way. First, right click the troublesome element and select ‘inspect element’ - you should be seeing something like this.

Now, when you hover over the element, Firebug will show you the changes. If you take a look here you’ll see that the rule you want is being ignored by the more specific original background rule. It’ll also show you where to look for it.

that’s a partial fix - it’s replacing with the background for the other tabs, not the left one which has rounded corners.

I thought that the code below should work - and it does appear when you hover over the sub-items but not over the main item itself

#mainnav .sf-navbar  .home  li:hover  {
    background:     url('images/menu_tab1_selected.png') no-repeat transparent;
    border: 5px dashed red; /*delete outline after fix*/
}

Unless I’ve misunderstood, the problem there is that you’re using .home li:hover. In your case, .home is a class on the li tag of the main navigation, so you’re trying to target a child element of (li).home, which are all the li elements in the subnavigation.

Give this a try:

#mainnav .sf-navbar li.home:hover

Hope that a) works and b) makes sense!

You are brilliant - that worked. will check out your info on how to use firebug more effectively. I was trying but couldn’t get it to work.

Now I have one final thing to solve as the background does a quick switch back to the non-rounded corners background - remove that and I’m done.

—-
EEEEK not working in opera

——