Create multi-column sub-menus

Creating multi-columns sub-menus (a.k.a mega-menus) using Superfish module is pretty easy.

Step 1: Enable "multi-column sub-menus" in your block settings.

Step 2: The structure of the sub-menu has to be slightly altered. Take the following as an example:

• Parent Menu
  • Child Menu 1
  • Child Menu 2
  • Child Menu 3
  • Child Menu 4

In order to display the children menus in two columns all you need to do is to add 2 extra menu items and place those children menus under them:

• Parent Menu
  • Column 1
    • Child Menu 1
    • Child Menu 2
  • Column 2
    • Child Menu 3
    • Child Menu 4

The above will be displayed as a dropdown with a single parent menu and a sub-menu that consists of two columns, on large screens. The column titles (Column 1 & 2) can also be made invisible easily.

Example CSS for hiding the column titles:

.sf-menu div.sf-multicolumn-column > a {
    border: 0 none !important;
    clip: rect(1px,1px,1px,1px);
    clip: rect(1px 1px 1px 1px);
    height: 1px !important;
    margin: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
}