Question

I'm using the Superfish jQuery menu system and have a requirement to show all children regardless of level. The menu only shows the children of the selected item. Perhaps someone can help me figure how to modify the code to make it work this way.

Superfish menu

HTML example of a node:

<li class="root"><a href="#" title="Training" class="root">Training</a>
  <ul>
    <li class="sub"><a href="#" title="Workshops - Classroom" class="sub">Workshops - Classroom</a>
      <ul>
        <li class="sub"><a href="#" title="Business Analytics" class="sub">Business Analytics</a></li>
        <li class="sub"><a href="#" title="Software Applications" class="sub">Software Applications</a></li>
        <li class="sub"><a href="#" title="Selling Skills" class="sub">Selling Skills</a></li>
        <li class="sub"><a href="#" title="Wal-Mart Focused" class="sub">Wal-Mart Focused</a></li>
      </ul>
    </li>
    <li class="sub"><a href="#" title="Public Workshop Schedule &amp; Registration Form" class="sub">Public Workshop Schedule &amp; Registration Form</a></li>
    <li class="sub"><a href="#" title="Webinars" class="sub">Webinars</a></li>
  </ul>
</li>

How it looks now:

screen shot 1

How it needs to look:

screen shot 2

Was it helpful?

Solution

You could try something with CSS to make the subitems always visible. When hovering, the current item gets the class 'sfHover'.

Perhaphs you can add a CSS style to your site something like this:

li.sub.sfHover ul {
  display: block !important;
  visibility: visible !important;
}

I'm not quite sure about the CSS selector to make it only work for sub-sub items, but I hope this gets you on your way.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top