diff --git a/css/dropdown.css b/css/dropdown.css new file mode 100644 index 0000000..75c7020 --- /dev/null +++ b/css/dropdown.css @@ -0,0 +1,43 @@ +/* Code taken and modified from here: https://www.w3schools.com/howto/howto_css_dropdown.asp */ + +/* Dropdown Button */ +.dropbtn { + background-color: #04AA6D; + color: white; + padding: 16px; + font-size: 16px; + border: none; +} + +/* The container
- needed to position the dropdown content */ +.dropdown { + position: relative; + display: inline-block; +} + +/* Dropdown Content (Hidden by Default) */ +.dropdown-content { + display: none; + position: absolute; + background-color: #f1f1f1; + 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 { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + +/* Change color of dropdown links on hover */ +.dropdown-content a:hover {background-color: #ddd;} + +/* Show the dropdown menu on hover */ +.dropdown:hover .dropdown-content {display: block;} + +/* Change the background color of the dropdown button when the dropdown content is shown */ +.dropdown:hover .dropbtn {background-color: #3e8e41;}