MAGETWO-37973: Menu: Improve submenu animation and submenu links mouse event effects

- Merge remote-tracking branch 'origin/MAGETWO-37973' into PR

- Conflicts:
	- app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/_menu.less

Author: Natalia Momotenko

app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/_menu.less

@@ -40,6 +40,8 @@
 @submenu-column__width__l: 19.8rem;
 @submenu-title__color: @color-white;
 @submenu-link__color: @color-very-light-gray;
+@submenu-link__padding-vertical: 1.25rem;
+@submenu-link__active__background-color: darken(@submenu-link__focus__background-color, 5%);
 @submenu-link__focus__background-color: @color-black4-almost;
 @submenu-section-label__color: @color-gray65-almost;
 @submenu-heading-group__indent-bottom: 3.8rem;
@@ -199,16 +201,17 @@
         > .submenu {
             background-color: @submenu__background-color;
             box-shadow: 0 0 3px @color-black;
-            left: -90rem;
+            left: 100%; // align all submenus with one Y axis line
             min-height: ~'calc(@{menu-logo__outer-size} + 2rem + 100%)';
             padding: @submenu__padding-vertical 0 0;
             position: absolute;
-            top: 0;
-            transition-duration: .5s;
-            transition-property: left, visibility;
-            transition-timing-function: ease;
+            top: -@menu-logo__outer-size;
+            transform: translateX(-100%);
+            transition-property: transform, visibility;
+            transition-duration: .3s;
+            transition-timing-function: ease-in-out;
             visibility: hidden;
-            z-index: @submenu__z-index;
+            z-index: @submenu__z-index - 1;
             &._overlap {
                 overflow-y: auto;
                 height: 100%;
@@ -219,8 +222,9 @@
         }
         &._show  {
             > .submenu {
-                left: 100%;
+                transform: translateX(0);
                 visibility: visible;
+                z-index: @submenu__z-index;
             }
         }
     }
@@ -234,7 +238,15 @@
         &:not(.level-0) {
             a {
                 display: block;
-                padding: 1.25rem @submenu__padding-horizontal;
+                padding: @submenu-link__padding-vertical @submenu__padding-horizontal;
+                &:hover {
+                    background-color: @submenu-link__focus__background-color;
+                }
+                &:active {
+                    padding-top: @submenu-link__padding-vertical + .1rem;
+                    padding-bottom: @submenu-link__padding-vertical - .1rem;
+                    background-color: @submenu-link__active__background-color;
+                }
             }
         }
     }
@@ -245,15 +257,19 @@
         }
         a {
             color: @submenu-link__color;
-            ._keyfocus & {
-                text-decoration: none;
-            }
-            &:active,
+            transition: background-color .1s linear;
+            &:hover,
             &:focus {
                 box-shadow: none;
-                ._keyfocus & {
+                text-decoration: none;
+            }
+            ._keyfocus & {
+                &:focus {
                     background-color: @submenu-link__focus__background-color;
                 }
+                &:active {
+                    background-color: @submenu-link__active__background-color;
+                }
             }
         }
         .parent {