Menu divider bar re-appears on hover (superfish)

  • I am working on a menu for friends website… and am still very new to designing. I am using thematic (superfish) and a child theme.

    Anyhow, I figured out how to put a divider bar in between menu items using:

    .sf-menu a {
background-image: url(images/menu_divider.jpg);
background-repeat: no-repeat;
background-position: left bottom;
etc......

    But, he wants the far left divider bar to be gone. Using firebug I found the class for that menu item to be “.page-item-7 “

    I then added this to my css:

    .page-item-7 a {
background-image: none;
}

    I thought YAHTZEE! I got it.. till I hovered over it and saw the bar grow back. The line does not show up until I mouse over it.

    I have tried all kinds of :hover, :focus, CSS to no avail… It’s probably something simple, but after a couple hours thought I would try here. Thank you in advance if anyone can help…

    The test site is here: https://www.kipp.theperimeterweb.com/wordpress/

Viewing 2 replies - 1 through 2 (of 2 total)

  • Try adding:

    .sf-menu .page-item-7 a {background-image:none;}

    after the .sf-menu a block.

    Thread Starter theperimeterweb

    (@theperimeterweb)

    Thank you for the reply.

    .sf-menu .page-item-7 a {background-image:none;}

    does the same thing… the far left bar is gone, until the mouse is hovered over it.. then the bar comes back. I want the left “divider bar” to remain on all of the menu items except for “gallery” to the far left.

    Thanks again… any other ideas?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Menu divider bar re-appears on hover (superfish)’ is closed to new replies.