diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index 3921556f1ff..b2b219603e0 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -154,6 +154,9 @@
   .quick-access-panel {
     width: 100%;
     display: table;
+    margin-top: -1px;
+    border-top: 1px solid $primary-low;
+    padding-top: 0.5em;
 
     h3 {
       padding: 0 0.4em;
@@ -279,12 +282,10 @@
 
 div.menu-links-header {
   width: 100%;
-  margin-bottom: 0.5em;
   .menu-links-row {
     box-sizing: border-box;
-    border-bottom: 1px solid dark-light-choose($primary-low, $secondary-medium);
     display: flex;
-
+    z-index: 2;
     // Tabs should have "ears".
     padding: 0 4px;
 
@@ -312,26 +313,17 @@ div.menu-links-header {
         // This is to make sure active and inactive tab icons have the same
         // size. `box-sizing` does not work and I have no idea why.
         border: 1px solid transparent;
-        border-bottom: 0;
+        &:not(.active):hover {
+          border-bottom: 0;
+          margin-top: -1px;
+        }
       }
 
       a.active {
         border: 1px solid dark-light-choose($primary-low, $secondary-medium);
-        border-bottom: 0;
+        border-bottom: 1px solid $secondary;
         position: relative;
 
-        &:after {
-          display: block;
-          position: absolute;
-          top: 100%;
-          left: 0;
-          z-index: z("header") + 1; // Higher than .menu-panel
-          width: 100%;
-          height: 0;
-          content: "";
-          border-top: 1px solid $secondary;
-        }
-
         &:focus,
         &:hover {
           background-color: inherit;
@@ -351,7 +343,6 @@ div.menu-links-header {
     box-sizing: border-box;
     align-items: center;
     display: flex;
-    margin: -0.5em 0;
     max-width: 100%;
 
     // `overflow: hidden` on `.user-activity-link` would hide the `::after`