Refactor menu-item-active: no !important

source/css/_common/outline/header/menu.styl

@@ -27,11 +27,8 @@
     transition-property: border-color;
     the-transition();
 
-    // To prevent hover on external links with touch devices after click.
-    @media (hover: none) {
-      &:hover {
-        border-bottom-color: transparent !important;
-      }
+    &:hover, &.menu-item-active {
+      background: var(--menu-item-bg-color);
     }
   }
 
@@ -55,10 +52,6 @@
   }
 }
 
-.menu-item-active a {
-  background: var(--menu-item-bg-color);
-}
-
 .use-motion .menu-item {
   opacity: 0;
 }

source/css/_schemes/Mist/_menu.styl

@@ -26,10 +26,6 @@
       +mobile() {
         text-align: left;
       }
-
-      &:hover {
-        @extend .menu-item-active a;
-      }
     }
 
     .badge {

source/css/_schemes/Muse/_menu.styl

@@ -15,15 +15,6 @@
   }
 }
 
-.menu-item-active a {
-  background: transparent;
-  border-bottom: 1px solid var(--link-hover-color) !important;
-
-  +mobile() {
-    border-bottom: 1px dotted $grey-lighter !important;
-  }
-}
-
 .menu .menu-item {
   +mobile() {
     margin: 0 10px;
@@ -36,8 +27,13 @@
       padding: 5px 10px;
     }
 
-    &:hover {
-      @extend .menu-item-active a;
+    &:hover, &.menu-item-active {
+      background: transparent;
+      border-bottom: 1px solid var(--link-hover-color);
+
+      +mobile() {
+        border-bottom: 1px dotted $grey-lighter;
+      }
     }
   }
 

source/css/_schemes/Pisces/_menu.styl

@@ -27,10 +27,6 @@
     position: relative;
     text-align: left;
     transition-property: background-color;
-
-    &:hover {
-      @extend .menu-item-active a;
-    }
   }
 
   +tablet-mobile() {
@@ -51,7 +47,7 @@
 }
 
 if (!hexo-config('menu_settings.badges')) {
-  .main-menu .menu-item-active a::after {
+  .main-menu .menu-item-active::after {
     background: $grey;
     border-radius: 50%;
     content: ' ';

source/css/_schemes/Pisces/_sub-menu.styl

@@ -19,7 +19,7 @@
     }
   }
 
-  .menu-item-active a {
+  .menu-item-active {
     border-bottom-color: $sidebar-highlight;
     color: $sidebar-highlight;
 

source/js/utils.js

@@ -211,12 +211,10 @@ NexT.utils = {
   },
 
   registerActiveMenuItem: function() {
-    document.querySelectorAll('.menu-item').forEach(element => {
-      const target = element.querySelector('a[href]');
-      if (!target) return;
+    document.querySelectorAll('.menu-item a[href]').forEach(target => {
       const isSamePath = target.pathname === location.pathname || target.pathname === location.pathname.replace('index.html', '');
       const isSubPath = !CONFIG.root.startsWith(target.pathname) && location.pathname.startsWith(target.pathname);
-      element.classList.toggle('menu-item-active', target.hostname === location.hostname && (isSamePath || isSubPath));
+      target.classList.toggle('menu-item-active', target.hostname === location.hostname && (isSamePath || isSubPath));
     });
   },