Solves dropdown menu alignment if border is used

Solves dropdown menu alignment if a border is used. Also changed a few missing spaces and renamed a comment whilst I was at it!
Fixes [#7169](https://github.com/zurb/foundation-sites/issues/7169).

Thanks to @imranomari for the base code.

diff --git a/scss/components/_dropdown-menu.scss b/scss/components/_dropdown-menu.scss
index d920408fec99fb0bc4ac0c4ff4381e269f9c67d8..02d078c35c248617460130638351d9b772ac9de7 100644 (file)
--- a/scss/components/_dropdown-menu.scss
+++ b/scss/components/_dropdown-menu.scss
@@ -18,10 +18,15 @@ $dropdownmenu-min-width: 200px !default;
 /// @type Color
 $dropdownmenu-background: $white !default;
 
-/// Border for dropdown panes.
+/// Border for dropdown sub-menus.
 /// @type List
 $dropdownmenu-border: 1px solid $medium-gray !default;
 
+// Border width for dropdown sub-menus.
+// Used to adjust top margin of a sub-menu if a border is used.
+// @type Length
+$dropdownmenu-border-width: nth($dropdownmenu-border, 1);
+
 @mixin foundation-dropdown-menu {
   .dropdown.menu {
     a {
@@ -58,11 +63,11 @@ $dropdownmenu-border: 1px solid $medium-gray !default;
         }
       }
 
-      &.is-left-arrow.opens-inner .submenu{
+      &.is-left-arrow.opens-inner .submenu {
         right: 0;
         left: auto;
       }
-      &.is-right-arrow.opens-inner .submenu{
+      &.is-right-arrow.opens-inner .submenu {
         left: 0;
         right: auto;
       }
@@ -85,6 +90,10 @@ $dropdownmenu-border: 1px solid $medium-gray !default;
       background: $dropdownmenu-background;
       border: $dropdownmenu-border;
 
+      @if (type_of($dropdownmenu-border-width) == 'number') {
+        margin-top: (-$dropdownmenu-border-width);
+      }
+
       > li {
         width: 100%;
       }