Fixes for menu formatting

src/definitions/collections/menu.less

@@ -721,6 +721,7 @@ Floated Menu / Item
 /* Active */
 .ui.vertical.tabular.menu .active.item {
   background-color: @tabularMenuActiveBackground;
+  color: @tabularMenuActiveColor;
   border-color: @tabularBorderColor;
   margin: 0px -@tabularBorderWidth 0px 0px;
   border-radius: @tabularBorderRadius 0px 0px @tabularBorderRadius;
@@ -862,41 +863,16 @@ Floated Menu / Item
   border-radius: 0em;
 }
 
-/* Inverted */
-.ui.secondary.inverted.menu {
+/* Sub Menu */
+.ui.vertical.secondary.menu .item > .menu .item {
   background-color: transparent;
 }
-.ui.secondary.inverted.pointing.menu {
-  border-width: @secondaryPointingBorderWidth;
-  border-color: @secondaryPointingBorderColor;
-}
-.ui.secondary.inverted.pointing.menu > .item {
-  color: rgba(255, 255, 255, 0.7);
-}
-.ui.secondary.inverted.pointing.menu > .header.item {
-  color: #FFFFFF !important;
-}
 
-/* Hover */
-.ui.secondary.inverted.pointing.menu > .menu > .item:hover,
-.ui.secondary.inverted.pointing.menu > .item:hover {
-  color: rgba(255, 255, 255, 0.85);
-}
-
-/* Pressed */
-.ui.secondary.inverted.pointing.menu > .menu > .item:active,
-.ui.secondary.inverted.pointing.menu > .item:active {
-  border-color: rgba(255, 255, 255, 0.4);
-}
-
-/* Active */
-.ui.secondary.inverted.pointing.menu > .menu > .item.active,
-.ui.secondary.inverted.pointing.menu > .item.active {
-  border-color: rgba(255, 255, 255, 0.8);
-  color: rgba(255, 255, 255, 1);
+/* Inverted */
+.ui.secondary.inverted.menu {
+  background-color: transparent;
 }
 
-
 /*---------------------
    Secondary Pointing
 -----------------------*/
@@ -910,6 +886,7 @@ Floated Menu / Item
   border-bottom-color: transparent;
   border-bottom-style: solid;
   border-radius: 0em;
+  align-self: flex-end;
 
   margin: @secondaryPointingItemMargin;
   padding: @secondaryPointingItemVerticalPadding @secondaryPointingItemHorizontalPadding;
@@ -992,9 +969,29 @@ Floated Menu / Item
 .ui.secondary.inverted.pointing.menu {
   border-color: @secondaryPointingInvertedBorderColor;
 }
+
+.ui.secondary.inverted.pointing.menu {
+  border-width: @secondaryPointingBorderWidth;
+  border-color: @secondaryPointingBorderColor;
+}
+.ui.secondary.inverted.pointing.menu > .item {
+  color: @secondaryPointingInvertedItemTextColor;
+}
+.ui.secondary.inverted.pointing.menu > .header.item {
+  color: @secondaryPointingInvertedItemHeaderColor !important;
+}
+
+/* Hover */
+.ui.secondary.inverted.pointing.menu > .menu > .item:hover,
+.ui.secondary.inverted.pointing.menu > .item:hover {
+  color: @secondaryPointingInvertedItemHoverTextColor;
+}
+
+/* Active */
 .ui.secondary.inverted.pointing.menu > .menu > .item.active,
 .ui.secondary.inverted.pointing.menu > .item.active {
-  border-color: @secondaryPointinInvertedActiveColor;
+  border-color: @secondaryPointingInvertedActiveBorderColor;
+  color: @secondaryPointingInvertedActiveColor;
 }
 
 /*--------------

src/themes/default/collections/menu.variables

@@ -117,7 +117,7 @@
 
 @labelTextMargin: 1em;
 @labelVerticalPadding: 0.3em;
-@labelHorizontalPadding: 0.8em;
+@labelHorizontalPadding: @relativeMini;
 
 @labelAndIconFloat: none;
 @labelAndIconMargin: 0em 0.5em 0em 0em;
@@ -255,12 +255,10 @@
 /* Pointing */
 @secondaryPointingBorderWidth: 2px;
 @secondaryPointingBorderColor: @borderColor;
-@secondaryPointingInvertedBorderColor: @whiteBorderColor;
-@secondaryPointinInvertedActiveColor: @white;
-
 @secondaryPointingItemMargin: 0em 0em -@secondaryPointingBorderWidth;
 @secondaryPointingItemVerticalPadding: @relativeTiny;
 @secondaryPointingItemHorizontalPadding: @relativeMedium;
+
 @secondaryPointingHoverTextColor: @textColor;
 
 @secondaryPointingActiveBorderColor: @black;
@@ -270,11 +268,17 @@
 @secondaryPointingActiveHoverBorderColor: @secondaryPointingActiveBorderColor;
 @secondaryPointingActiveHoverTextColor: @secondaryPointingActiveTextColor;
 
-
 @secondaryPointingHeaderColor: @darkTextColor;
 
 @secondaryVerticalPointingItemMargin: 0em -@secondaryPointingBorderWidth 0em 0em;
 
+@secondaryPointingInvertedBorderColor: @whiteBorderColor;
+@secondaryPointingInvertedItemTextColor: @invertedTextColor;
+@secondaryPointingInvertedItemHeaderColor: @white;
+@secondaryPointingInvertedItemHoverTextColor: @selectedTextColor;
+@secondaryPointingInvertedActiveBorderColor: @white;
+@secondaryPointingInvertedActiveColor: @invertedSelectedTextColor;
+
 
 /* Tiered */
 @tieredActiveItemBackground: #FCFCFC;
@@ -312,7 +316,9 @@
 @tabularActiveColor: @selectedTextColor;
 @tabularActiveBoxShadow: none;
 
-@tabularMenuActiveBackground: #FFFFFF;
+@tabularMenuActiveBackground: @white;
+@tabularMenuActiveColor: @selectedTextColor;
+
 @tabularActiveWeight: bold;
 @tabularBorderRadius: 5px;