Updated side bar to have drop downs

1 files changed, 44 insertions, 7 deletions

diff --git a/CSS/PurpleAndDark.css b/CSS/PurpleAndDark.css
index 3945122..7d00e2f 100644
--- a/CSS/PurpleAndDark.css
+++ b/CSS/PurpleAndDark.css
@@ -89,7 +89,44 @@ main{
     width: 90%;
     background-color: rgba(36,38,40,1);
 }
-@media only screen and (min-width: 768px) and (min-height: 614px){
+.dropbtn {
+  color: #fff;
+  padding: 1.4em;
+  font-size: .9em;
+  cursor: pointer;
+  background: rgba(37,37,37,1);
+  border: none;*/
+  display: block;
+  position: relative;
+  width: 100%;
+  text-align: left;
+}
+.dropbtn:hover, .dropbtn:focus {
+  background-color: #000;
+}
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: rgba(37,37,37,1);
+  /*min-width: 160px;*/
+  width: 100%;
+  overflow: auto;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+.dropdown-content a {
+  color: #fff;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+.dropdown a:hover {background-color: #000;}
+.show {display: block;}
+@media only screen and (min-width: 768px) and (min-height: 582px){
     body{
         display: grid;
         grid-template-columns: 375px auto;
@@ -158,7 +195,7 @@ main{
         /*width: 38.66% !important;*/
     }
 }
-@media only screen and (max-height: 880px) and (min-width: 768px) and (min-height: 582px){
+/*@media only screen and (max-height: 880px) and (min-width: 768px) and (min-height: 582px){
     body{
         display: flex !important;
     }
@@ -167,15 +204,15 @@ main{
     }
     ul li a{
         font-size: 0.625em;
-        padding: 1em;        
+        padding: 1em;
     }
-}
+}*/
 @media only screen and (max-height: 665px) and (min-height: 582px){
     div.logo{
         margin-top: 1em;
     }
 }
-@media only screen and (max-height: 762px){
+/*@media only screen and (max-height: 762px){
     ul li a{
         font-size: 7px;
     }
@@ -185,5 +222,5 @@ main{
     body{
         grid-template-columns: 16% auto;
     }
-    
-}
\ No newline at end of file
+
+}*/