.menu { list-style: none; display: flex; flex-wrap: wrap; }
.menu li { position: relative; }
.menu a { display: block; padding: 10px 20px; color: #ffffff; text-decoration: none; white-space: nowrap; transition: background 0.3s, color 0.3s; }
.menu li:hover > a { background-color: #000000; color: #2971f6; }
.submenu,.submenu-right { display: none; position: absolute; background: #000000; min-width: 160px; list-style: none; z-index: 100; }

@media (max-width: 768px) {
 .hamburger { display: block; font-size: 26px; color: #ffffff; background: none; border: none; cursor: pointer; margin-bottom: 10px; }
 .menu { display: none; flex-direction: column; width: 100%; background: #000000; }
 #menu-toggle { display: none; }
 #menu-toggle:checked + label + ul { display: flex; }
 .menu li { width: 100%; }
 .submenu, .submenu-right { position: static; display: none; padding-left: 20px; }
 .menu li:hover > .submenu, .submenu li:hover > .submenu-right { display: block; }
 .submenu .dropdown > a::after { content: "▸"; float: right; }
 .submenu .dropdown:hover > a::after { content: "▼"; }
}

@media (min-width: 769px) {
 .menu li:hover > .submenu { display: block; top: 100%; left: 0; }
 .submenu li:hover > .submenu-right { display: block; top: 0; left: 100%; }
 .submenu .dropdown > a:after { content: "▸"; float: right; }
 .submenu .dropdown:hover > a::after { content: "▼"; }
 #menu-toggle { display: none; } 
}