1

I am using Superfish to show a horizontal menu on a website. Whenever I am on a page that is either the current menu item or sub-menu item, the sub-menu always show. When this happens, it overlaps other sub-menus when you hover the mouse over them. How do you hide the current sub-menu being shown?

edit: OK I figured out how to do this with CSS. I added the following code to superfish-navbar.css

ul.sf-navbar ul {
display: none;
}
ul.sf-navbar li:hover ul {
display: block;
}

It hides the current sub-menu and shows all sub-menus when you hover over the parent item.

Bill the Lizard
  • 398,270
  • 210
  • 566
  • 880
Daniel Harris
  • 1,805
  • 10
  • 45
  • 63

1 Answers1

0

For CSS

In superfish-navbar.css you would remove the following rule at line 63.

ul.sf-navbar .current ul, ul.sf-navbar ul li:hover ul, ul.sf-navbar ul li.sfHover ul {
      left: 0;
      top: 2.5em;
  }

When You End Up Using Javascript

In the documentation for the superfish plugin, on the Options tab, it shows the default options. It looks like pathLevels is set to 1, and the description of pathLevels

the number of levels of submenus that remain open or are restored using pathClass

looks like the option you need. Try setting pathLevels to 0.

See this jsfiddle for comparison: http://jsfiddle.net/keithwyland/G87Lm/

http://users.tpg.com.au/j_birch/plugins/superfish/#options

keithwyland
  • 2,998
  • 1
  • 17
  • 22
  • Nope, doesn't work. My superfish menu doesn't even use the javascript because it is conflicting with lightbox. – Daniel Harris Mar 09 '12 at 20:53
  • "doesn't even use the javascript". but you have this script in your code: $(document).ready(function(){ $("ul.sf-menu").superfish({ animation: {opacity:'show',height:'show'}, // slide-down effect without fade-in speed: 'fast', pathClass: 'active', delay: 1000 // 1.0 second delay on mouseout }); }); – keithwyland Mar 09 '12 at 20:55
  • Yeah, the script was there when superfish worked with javascript. I kept the script so I can use it later. – Daniel Harris Mar 09 '12 at 20:58
  • Ok, i updated my answer to have the CSS you should remove, and I left on the javascript part for your reference. Hope it helps. – keithwyland Mar 09 '12 at 21:05