.topnav { overflow: hidden; background-color: #1f2833; } .topnav a { float: left; display: flex; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; border-radius: 2px; } .topnav .icon { display: none; } .dropdown { overflow: hidden; display: flex; } .dropdown .dropbtn { font-size: 17px; border: 1px solid #888; border-radius: 2px; outline: none; color: #c5c6c7; background-color: #1e2832; padding: 16px 16px; font-family: inherit; display: flex; } .dropdown-content { display: none; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; color: #c5c6c7; background-color: #1e2832; border: 1px solid #888; border-radius: 2px; } .dropdown-content a { float: none; padding: 12px 16px; text-decoration: none; display: flex; text-align: left; } .dropdown:hover .dropdown-content { display: inline-block; } @media screen and (max-width: 600px) { .topnav a:not(:first-child), .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: flex; } } @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: inline-block; text-align: left; } .topnav.responsive .dropdown {float: none;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: inline-block; width: 100%; text-align: left; } } .active a { color: #433; }