From 5d7eb2edc0d1090ace0f66eaf5f2d09003141f63 Mon Sep 17 00:00:00 2001 From: Brian Andrews <30535641+andrewsb8@users.noreply.github.com> Date: Fri, 21 Oct 2022 09:47:12 -0400 Subject: [PATCH] added drop down css --- css/dropdown.css | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 css/dropdown.css diff --git a/css/dropdown.css b/css/dropdown.css new file mode 100644 index 00000000..75c70208 --- /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;}