<style>
.navbar {
overflow: hidden; background-color: #324856; font-family: Century Gothic, sans-serif;
}
/* Links inside the navbar */ .navbar a {
float: center; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none;
}
/* The dropdown container */ .dropdown {
float: right; overflow: hidden;
}
/* Dropdown button */ .dropdown .dropbtn {
font-size: 28px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; /* Important for vertical align on mobile phones */ margin: 0; /* Important for vertical align on mobile phones */
}
/* Add a red background color to navbar links on hover */ .navbar a:hover, .dropdown:hover .dropbtn {
background-color: #d66c44;
}
/* Dropdown content (hidden by default) */ .dropdown-content {
display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;
}
/* Links inside the dropdown */ .dropdown-content a {
float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left;
}
/* Add a grey background color to dropdown links on hover */ .dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content {
display: block;
}
</style>