Improves styles for submenu links

app/assets/stylesheets/layout.scss

@@ -445,7 +445,7 @@ header {
   }
 }
 
-.subnavigation-container {
+.subnavigation-background {
   background: white;
   height: rem-calc(50);
   margin-top: rem-calc(-50);
@@ -456,17 +456,11 @@ header {
 
   @media (min-width: $small-breakpoint) {
     background: white;
-    padding-left: 0;
-
-    & > .column {
-      padding-left: 0;
-    }
   }
 
   a {
     color: white;
     display: inline-block;
-    font-family: $font-sans;
     line-height: $line-height*2;
     position: relative;
     text-align: left;
@@ -475,7 +469,6 @@ header {
     @media (min-width: $small-breakpoint) {
       color: $text;
       font-weight: bold;
-      margin-left: $line-height/2;
       margin-right: $line-height*1.5;
       margin-right: 12px\9;
       width: auto;
@@ -496,6 +489,36 @@ header {
   }
 }
 
+.submenu {
+  background: white;
+  border-bottom: 1px solid $border;
+  clear: both;
+  margin: $line-height 0 $line-height/2;
+
+  a {
+    color: $text;
+    display: inline-block;
+    font-weight: bold;
+    margin-right: $line-height;
+    margin-right: 12px\9;
+    position: relative;
+    text-align: left;
+
+    @media (min-width: $small-breakpoint) {
+      margin-right: $line-height*1.5;
+    }
+
+    &:hover {
+      color: $link;
+    }
+
+    &.active {
+      border-bottom: 2px solid $brand;
+      color: $brand;
+    }
+  }
+}
+
 // 03. Footer
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 

app/views/layouts/_header.html.erb

@@ -67,7 +67,7 @@
     </nav>
   </div>
 
-  <div class="row-full subnavigation-container"></div>
+  <div class="row-full subnavigation-background"></div>
 
   <% if home_page? %>
     <div class="row home-page">

app/views/shared/_order_links.html.erb

@@ -1,4 +1,4 @@
-<section class="subnavigation row">
+<section class="submenu">
   <% valid_orders.each do |order| %>
     <%= link_to t("#{i18n_namespace}.orders.#{order}"),
                 current_path_with_query_params(order: order, page: 1),