/* NAVBAR STYLING STARTS */ .navbar { display: flex; align-items: center; justify-content: space-between; padding: 20px; background-color: #A6DDFF; color: #fff; } .nav-links a { color: #000; } /* LOGO */ .logo { font-size: 32px; } /* NAVBAR MENU */ .menu { display: flex; gap: 1em; font-size: 18px; } .menu li:hover { background-color: #79CCFF; border-radius: 5px; transition: 0.3s ease; } .menu li { padding: 5px 14px; } /* DROPDOWN MENU */ .services { position: relative; } .dropdown { background-color: #4AAEEC; padding: 1em 0; position: absolute; /*WITH RESPECT TO PARENT*/ display: none; border-radius: 8px; top: 32px; } .dropdown li + li { margin-top: 10px; } .dropdown li { padding: 0.2em 1em; width: 8em; text-align: center; } .dropdown li:hover { background-color: #79CCFF; } .services:hover .dropdown { display: block; } /*RESPONSIVE NAVBAR MENU STARTS*/ /* CHECKBOX HACK */ input[type=checkbox]{ display: none; } /*HAMBURGER MENU*/ .hamburger { display: none; font-size: 24px; user-select: none; } /* APPLYING MEDIA QUERIES */ @media (max-width: 768px) { .menu { display:none; position: absolute; background-color:#79CCFF; right: 0; left: 0; text-align: center; padding: 16px 0; } .menu li:hover { display: inline-block; background-color:#4AAEEC; transition: 0.3s ease; } .menu li + li { margin-top: 12px; } input[type=checkbox]:checked ~ .menu{ display: block; } .hamburger { display: block; } .dropdown { left: 0%; top: 30px; transform: translateX(35%); } .dropdown li:hover { background-color: #79CCFF; }