Updated side bar to have drop downs

1 files changed, 37 insertions, 3 deletions

diff --git a/CSS/main.css b/CSS/main.css
index de524a0..716655e 100644
--- a/CSS/main.css
+++ b/CSS/main.css
@@ -90,6 +90,40 @@ main{
     width: 90%;
     background-color: rgba(213,213,213,1.0);
 }
+.dropbtn {
+  color: #000;
+  padding: 1.4em;
+  font-size: .9em;
+  cursor: pointer;
+  background: rgba(210,210,210,1);
+  border: none;*/
+  display: block;
+  position: relative;
+  width: 100%;
+  text-align: left;
+}
+.dropbtn:hover, .dropbtn:focus {
+  background-color: #fff;
+}
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: rgba(210,210,210,1);
+  width: 100%;
+  overflow: auto;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+.dropdown-content a {
+  color: #000;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
 @media only screen and (min-width: 768px) and (min-height: 614px){
     body{
         display: grid;
@@ -168,7 +202,7 @@ main{
     }
     ul li a{
         font-size: 0.625em;
-        padding: 1em;        
+        padding: 1em;
     }
 }
 @media only screen and (max-height: 665px) and (min-height: 582px){
@@ -186,5 +220,5 @@ main{
     body{
         grid-template-columns: 16% auto;
     }
-    
-}
\ No newline at end of file
+
+}