This page shows how to change the opening directions of certain submenus.

The submenu of "Main item 4" opens upward while the other top-level submenus open downward in the navigation bar above. To accomplish this, you need to add a custom CSS class to "Main item 4". Go to Appearance > Menus and add a CSS class (e.g. custom_open_dir) to the menu item. If the CSS Classes option is not visible, enable it in the Screen Options at the top of the page. Then add these lines to the style.css file fo your child theme: 
1.
2.
3.
 
#nav .custom_open_dir > .sub-menu {
    left:0; right:auto; top:auto; bottom:100%;
}
You should avoid the use of !important to allow Javascript to change the opening direction if the submenu would go outside the view. This is why #nav is needed at the beginning of the rule. Thus the style overrides the opening direction without the use of !important.
To do the same for a popup menu widget, add a class to the widget (e.g. my_popup_menu) and add this to your style.css file: 
1.
2.
3.
 
.my_popup_menu.popup_menu .custom_open_dir > .sub-menu {
    left:0; right:auto; top:auto; bottom:100%;
}
The ".my_popup_menu.popup_menu" ensures that the style overrides the opening direction. Similarly, you can change the opening direction to
Downward: 
1.
2.
3.
 
#nav .custom_open_dir > .sub-menu {
    left:0; right:auto; top:100%; bottom:auto;
}
Leftward: 
1.
2.
3.
 
#nav .custom_open_dir > .sub-menu {
    left:auto; right:100%; top:0px; bottom: auto;
}
Rightward: 
1.
2.
3.
 
#nav .custom_open_dir > .sub-menu {
    left:100%; right:auto; top:0px; bottom: auto;
}