This page shows how to create horizontal submenus.

Example 1
The primary navigation in the header demonstrates a menu that has horizontal submenus.

Custom CSS: 

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
 
    /* full width horizontal submenus */
#nav .menu_normal li {
    position: static !Important;
}

#nav .menu_normal .sub-menu  {
    left: 0 !Important;
    right: 0 !Important;
}

#nav .menu_normal .sub-menu > li {
    float: left !Important;
}

#nav .menu_normal .label_holder {
    width: auto !Important;
}


    /* add vertical separator between submenu items */
#nav .menu_normal .sub-menu > li {
    border-left: 1px solid #4f4d49;
}
#nav .menu_normal .sub-menu > li:first-child {
    border-left: 0;
}

Example 2
This menu works the same as the primary navigation in the header, but one of its first-level submenus is always open:

Custom CSS:

Same as Example 1.
Key menu settings:
  • Open first level menu: enabled

Example 3
This menu works the same as the previous one, but it has multilevel horizontal submenus:

Custom CSS:

Same as Example 1, but extended with the following declaration: 
1.
2.
3.
4.
5.
 
    /* decrease the right padding of submenu folder (item that has submenu) labels */
#nav .menu_normal .sub-menu .label_holder {
    padding-right: 6px !Important;
}
Key menu settings:
  • Open first level menu: enabled
  • Opening Direction - First level popups: downward
  • Opening Direction - Non-first level popups: downward

Example 4
This menu is the same as the previous one, but here only the first level submenus are horizontal, the others are vertical:

Custom CSS: 

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
 
    /* full width horizontal first-level submenus */
#nav .menu_normal > li {
    position: static !Important;
}

#nav .menu_normal > li > .sub-menu  {
    left: 0 !Important;
    right: 0 !Important;
}

#nav .menu_normal > li > .sub-menu > li {
    float: left !Important;
}

#nav .menu_normal > li > .sub-menu > li > a > .label_holder {
    width: auto !Important;
}

    /* increase the font size of first-level submenus */
#nav .menu_normal > li > .sub-menu > li {
    font-size: 15px !Important;
}
    /* remove the horizontal separator between first-level submenu items (it can be done in the theme editor) */
#nav .menu_normal > li > .sub-menu > li {
    border-top: 0 !Important;
}
    /* add vertical separators between first-level submenu items */
#nav .menu_normal > li > .sub-menu > li {
    border-left: 1px solid #4f4d49;
}
#nav .menu_normal > li > .sub-menu > li:first-child {
    border-left: 0;
}
    /* decrease the right padding of first-level submenu folder labels (submenu items that has a submenu) */
#nav .menu_normal > li > .sub-menu > li > a > .label_holder {
    padding-right: 6px !Important;
}
    /* Change the opening direction of the second level submenus to downward */
#nav .menu_normal > li > .sub-menu > li > .sub-menu {
    left:0; right:auto; top:100%; bottom:auto;
}

Key menu settings:

  • Open first level menu: enabled
  • Opening Direction - First level popups: downward
  • Opening Direction - Non-first level popups: rightward