Question

I ran into a little problem that seems to be a pain in the ass to fix. I have styled this wordpress menu http://bandmark.com and every menu item has its own background image. The problem I am having is that I cannot remove or overwrite the style that controls the “.current” background. On the home page they look fine but if you click a link to go to a page/category then the .current style kicks in and messes with the presentation. When you hover over the current menu item the graphic slides in at a weird angle and does not look very good.

    nav#omc-main-navigation ul li.current-menu-item a

seems to be element that I need to override. If I change the background to none I get a blank screen. Anyway to get the .current state to be the same as :hover? Like I said above they all have their own menu-item-{number}. I apologize if this sounds a bit confusing.

Answer 1

Where you’ve defined the hover states, e.g.:

nav#omc-main-navigation ul li#menu-item-4200 a:hover { background: ... }

add the current menu item as follows:

nav#omc-main-navigation ul li#menu-item-4200 a:hover,
nav#omc-main-navigation ul li#menu-item-4200.current-menu-item a { background: ... }