Issue using background image rollovers for top menu items

[mpmchugh]

Hello,

I’m hoping someone can shed some light on this. I’m setting up a site, using the PixoPoint Menu Plugin to generate the site’s main menu. I successfully adapted the css to using background image rollovers for the top level menubar elements, but have run into one sticking point.

Though this code in the css allows for the top menu to stay "selected" using a background color as the cursor drops into the menu and submenus below…

#pixopoint_menu1 li:hover,#pixopoint_menu1 li.sfhover {
        color:#175696;
        background: yellow;
}

… I can’t figure out how to adapt it now that I’m using background images for the top level LI elements. Everything else works fine, but I can’t get the hover state to stick on the top LI elements when the cursor drops into the sub UL. This is what I’ve tried:

#pixopoint_menu1 li.page_item.page-item-7:hover,
#pixopoint_menu1 li.page_item.page-item-7.sfhover {
        background: transparent url(/img/nav.png) no-repeat;
        background-position: -110px -27px;
}

I’m using very specific LI classes, as the top menu LI’s vary in width, and I’m repositioning a background png for the different states.

Any insight into how to fix this would be appreciated.

Thanks,
Michael

[mpmchugh]

Found a solution to this elsewhere. The trick is to do the image swap on the hover of the enclosing LI, not the enclosed A tag, as I had been doing.

[imported_Ryan]

Glad to hear you got it working ” title=”Smiley” />

[Author]

Posts