Custom CSS for 3-level menus

.wsmenu > .wsmenu-list > li > .sub-menu .sub-menu { display: none; position: absolute; left: 100%; top: 0; min-width: 220px; background: #fff; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 10px 0; z-index: 1001; } .wsmenu > .wsmenu-list > li > .sub-menu li:hover > .sub-menu { display: block; } .wsmenu > .wsmenu-list > li > .sub-menu .menu-item-has-children > a::after { content: ‘\203A’; float: right; margin-left: 8px; } .navbar .dropdown-menu .dropdown-menu { display: none; position: absolute; left: 100%; top: 0; min-width: 220px; background: #fff; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 8px 0; z-index: 1001; } .navbar .dropdown-menu li:hover > .dropdown-menu { display: block; } .navbar .dropdown-menu .menu-item-has-children > a::after { content: ‘\203A’; float: right; margin-left: 10px; font-size: 1.2em; } @media (max-width: 991px) { .wsmenu > .wsmenu-list > li > .sub-menu .sub-menu, .navbar .dropdown-menu .dropdown-menu { position: static; left: 0; box-shadow: none; padding-left: 15px; } }