From 0fa8bd5e936fc24b70e1f841cca50021605eb9bf Mon Sep 17 00:00:00 2001
From: Kaisaan <34224128+Kaisaan@users.noreply.github.com>
Date: Mon, 24 Apr 2023 11:46:46 -0400
Subject: [PATCH] try adding dropdown to navbar

---
 _includes/nav.html |  9 ++++++++-
 css/style.css      | 48 +++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/_includes/nav.html b/_includes/nav.html
index 3dbc775..94f3847 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -3,7 +3,14 @@
         <ul>
             <li class="navstd"><a href="/">Home</a></li>
             <li class="navstd"><a href="/pages/about.html">About Me</a></li>
-            <li class="navstd"><a href="/pages/gaming.html">Gaming</a></li>
+            <div class="dropdown">
+                <button class="dropbtn">Gaming 
+                  <i class="fa fa-caret-down"></i>
+                </button>
+                <div class="dropdown-content">
+                  <a href="/pages/gaming.html">Recommendations</a>
+                </div>
+              </div>
             <li class="navstd"><a href="/pages/contact.html">Contact</a></li>
         </ul>
     </nav>
diff --git a/css/style.css b/css/style.css
index f9e97bc..bb834c0 100644
--- a/css/style.css
+++ b/css/style.css
@@ -71,4 +71,50 @@ a:active {
 
 .navstd a:hover {
     background-color: #22cc4d;
-}
\ No newline at end of file
+}
+
+.dropdown {
+    float: left;
+    overflow: hidden;
+  }
+  
+.dropdown .dropbtn {
+    font-size: 16px;  
+    border: none;
+    outline: none;
+    color: white;
+    padding: 14px 16px;
+    background-color: inherit;
+    font-family: inherit;
+    margin: 0;
+}
+
+.dropdown:hover .dropbtn {
+    background-color: #22cc4d;
+}
+
+.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;
+  }
+  
+  .dropdown-content a {
+    float: none;
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    text-align: left;
+  }
+  
+  .dropdown-content a:hover {
+    background-color: #ddd;
+  }
+  
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
\ No newline at end of file