hover behavior in nav bar

static/css/styles2.css

@@ -10,7 +10,12 @@
     .wrapper > * {
         /*    border: 2px solid #f08c00; */
         border 0;
-        padding: 5px; 
+         padding: 5px;  
+    }
+
+    .wrapper nav {
+        padding-top: 0;
+        padding-bottom: 0;
     }
 
     a {
@@ -232,19 +237,31 @@
     }
 
     nav li {
-        margin: 0.2em;
+        margin: 0;
+        padding: 0.2em;
     }
 
-    nav a {
+    nav a,
-        color: white;
-        transition: all .2s ease-in-out;
-    }
-    
     nav a i {
         color: white;
     }
     
+    nav li:hover,
+    nav li:hover a,
+    nav li:hover a i {
+        color: #1c75bc;
+        background: white;
+    }
 
+    .nav-active,
+    .nav-active a,
+    .nav-active a i {
+        color: #1c75bc;
+        background: white;
+    }
+
+
+    
 .main-head {
     grid-area: header;
     background: #ededed;

templates/newbase.html

@@ -183,7 +183,7 @@
               <i class="fas fa-clipboard-list"></i>&nbsp;Workouts
             </a>
           </li>
-          <li>
+          <li class="nav-active">
             <a href="/rowers/new_racing">
               <i class="fas fa-flag-checkered"></i>&nbsp;Racing
             </a>