Search code examples
javascriptjquerycsssasssuperfish

Is there a way to make superfish plugin same height of the menu?

I'm using superfish jquery plugin. I'm trying to make the second submenu to have the same height as the first submenu. I also want to position the second submenu just under the menu as indicated in the screenshot. But i don't know how to do it. I've tried making the parent as display: contents but if I do that everything just stops working enter image description here

Solution

  • This can be solved by adding just two css-rule.

    By default all submenus (i.e. the <ul>s) are absolutely positioned with respect to the parent <li> element. So, to make the third level submenu positioned with respect to the top level menu, unset position: relative; on all second level <li>s:

    .sf-menu ul li {
    position: unset;
}

    To make the second submenu at least as high as the first submenu, you can set min-height on the second submenu's ul:

    .sf-menu ul li ul {
    min-height: 100%;
}

    You might want to set the background color on that css rule or do some further styling to fit your needs.