#main-menu .has-submenu { position: relative; }
#main-menu .has-submenu > a.submenu-toggle { cursor: pointer; }
#main-menu .has-submenu .submenu {
    display: none; position: absolute; top: 100%; left: 0;
    min-width: 180px; background: rgba(28,28,28,0.97);
    padding: 6px 0; margin: 0; list-style: none;
    border-radius: 0 0 4px 4px; z-index: 999;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.lightmode #main-menu .has-submenu .submenu { background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
#main-menu .has-submenu .submenu li { display: block; padding: 0; }
#main-menu .has-submenu .submenu li a {
    display: block; padding: 10px 16px; font-size: 14px;
    color: inherit; white-space: nowrap;
}
#main-menu .has-submenu .submenu li a:hover { background: #3498DB; color: #fff !important; }
#main-menu .has-submenu:hover > .submenu,
#main-menu .has-submenu.open > .submenu { display: block; }
@media (max-width: 800px) {
    #main-menu .has-submenu { position: static; }
    #main-menu .has-submenu .submenu {
        position: static; box-shadow: none; padding-left: 20px;
        background: rgba(0,0,0,0.15);
    }
    #main-menu .has-submenu:hover > .submenu { display: none; }
    #main-menu .has-submenu.open > .submenu { display: block; }
}