From 831d1fcc33b8dc9d7c07408a04cb0773d2e6e19e Mon Sep 17 00:00:00 2001
From: MayhemCreates <78968489+MayhemCreates@users.noreply.github.com>
Date: Fri, 26 Mar 2021 12:20:31 +0000
Subject: [PATCH 1/2] removed js

---
 express/css/custom.css | 21 +++++++++------------
 express/index.html     |  7 +++++--
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/express/css/custom.css b/express/css/custom.css
index 8881596..d134c72 100644
--- a/express/css/custom.css
+++ b/express/css/custom.css
@@ -68,16 +68,10 @@ font-family: 'Questrial', sans-serif;
     border:none;
     cursor: pointer;
   }
-  
-  /* Dropdown button on hover & focus */
-  .dropbtn:hover, .dropbtn:focus {
-    background-color: red;
-  }
-  
+    
   /* The container <div> - needed to position the dropdown content */
   .dropdown {
     position: relative;
-    display: inline-block;
   }
   
   /* Dropdown Content (Hidden by Default) */
@@ -98,12 +92,15 @@ font-family: 'Questrial', sans-serif;
     display: block;
   }
   
-  /* Change color of dropdown links on hover */
-  .dropdown-content a:hover {background-color: #ddd}
-  
-  /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
-  .show {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;}
 
 /* ===================================
   listings grid
diff --git a/express/index.html b/express/index.html
index 427a614..f84c7a2 100644
--- a/express/index.html
+++ b/express/index.html
@@ -15,13 +15,16 @@ <h2>For gardens on the grooow</h2>
   </section>
   <section id="filters">
     <div class="filter-wrapper">
+      <!--buttons-->
       <div class="nav-item">
-        <button onclick="myFunction()" class="dropbtn">Sort</button>
-          <div id="myDropdown" class="dropdown-content">
+        <div class="dropdown">
+        <button class="dropbtn">Sort</button>
+          <div class="dropdown-content">
             <a href="#">Sort A-Z</a>
             <a href="#">Sort Z-A</a>
             <a href="#">Sort Jan - Dec</a>
           </div>
+        </div>
       </div>
       <div class="nav-item">
         <button onclick="myfunction()" class="dropbtn">Filter</button>

From 823179129cf8ce7a92fc33b55eb7deb6ba724918 Mon Sep 17 00:00:00 2001
From: Harrie Mayhew <80770884+mayhemcreates@users.noreply.github.com>
Date: Fri, 26 Mar 2021 14:34:11 +0000
Subject: [PATCH 2/2] Update express/css/custom.css

Co-authored-by: Sarah Rainbow <sarah.rainbow@bbc.co.uk>
---
 express/css/custom.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/express/css/custom.css b/express/css/custom.css
index d134c72..5dfa675 100644
--- a/express/css/custom.css
+++ b/express/css/custom.css
@@ -94,7 +94,9 @@ font-family: 'Questrial', sans-serif;
   
 
 /* Change color of dropdown links on hover */
-.dropdown-content a:hover {background-color: #ddd;}
+.dropdown-content a:hover {
+  background-color: #ddd;
+}
 
 /* Show the dropdown menu on hover */
 .dropdown:hover .dropdown-content {display: block;}
@@ -119,4 +121,4 @@ font-family: 'Questrial', sans-serif;
     width: 300px; 
     height: 300px;
     object-fit: cover;
-  }
\ No newline at end of file
+  }