specify nav's anchor selector for applying styles

Author: sesemaya

assets/sass/components/_dropdown.scss

@@ -19,9 +19,9 @@
 	margin: 0 !important;
 	min-width: 100%;
 	opacity: 0;
-	padding-top: $margin-base !important;
+	padding-top: $margin-base;
 	padding-right: 0;
-	padding-bottom: $margin-base !important;
+	padding-bottom: $margin-base;
 	padding-left: 0;
 	position: absolute !important;
 		top: 100%;
@@ -43,18 +43,22 @@
 			left: auto;
 		transform-origin: 100% 0;
 	}
-	a,
-	.a {
-		color: $black-text-solid !important;
-		@include text-overflow();
-		&:focus,
-		&:hover {
-			background-color: $offwhite-solid;
+	li {
+		> a,
+		> .a {
+			color: $black-text-solid;
+			@include text-overflow();
+			&:focus,
+			&:hover {
+				background-color: $offwhite-solid;
+			}
+		}
+		&.active {
+			> a,
+			> .a {
+				background-color: $offwhite-solid;
+			}
 		}
-	}
-	.active > a,
-	.active > .a {
-		background-color: $offwhite-solid;
 	}
 }
 
@@ -80,7 +84,7 @@
 	}
 	~ .dropdown-menu {
 		min-width: 100%;
-		padding-top: ($btn-height + $margin-base + ($nav-height - $btn-height)) !important;
+		padding-top: ($btn-height + $margin-base + ($nav-height - $btn-height));
 		// position
 			top: ($margin-base * -1 + ($nav-height - $btn-height) / -2);
 			left: 0;

assets/sass/components/_nav.scss

@@ -4,21 +4,21 @@
 	padding: 0;
 	position: relative;
 	@include clearfix();
-	a,
-	.a {
-		align-items: center;
-		display: flex;
-		min-height: $nav-height;
-		padding: 0 $grid-gutter;
-		position: relative;
-		&:focus,
-		&:hover {
-			text-decoration: none;
-		}
-	}
 	li {
 		display: block;
 		position: relative;
+		> a,
+		> .a {
+			align-items: center;
+			display: flex;
+			min-height: $nav-height;
+			padding: 0 $grid-gutter;
+			position: relative;
+			&:focus,
+			&:hover {
+				text-decoration: none;
+			}
+		}
 	}
 	ul {
 		margin: 0;

css/base.css

@@ -3045,9 +3045,9 @@ pre code {
   margin: 0 !important;
   min-width: 100%;
   opacity: 0;
-  padding-top: 8px !important;
+  padding-top: 8px;
   padding-right: 0;
-  padding-bottom: 8px !important;
+  padding-bottom: 8px;
   padding-left: 0;
   position: absolute !important;
   top: 100%;
@@ -3077,22 +3077,22 @@ pre code {
   -webkit-transform-origin: 100% 0;
           transform-origin: 100% 0;
 }
-.dropdown-menu a,
-.dropdown-menu .a {
-  color: #212121 !important;
+.dropdown-menu li > a,
+.dropdown-menu li > .a {
+  color: #212121;
   display: block;
   line-height: inherit;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.dropdown-menu a:focus, .dropdown-menu a:hover,
-.dropdown-menu .a:focus,
-.dropdown-menu .a:hover {
+.dropdown-menu li > a:focus, .dropdown-menu li > a:hover,
+.dropdown-menu li > .a:focus,
+.dropdown-menu li > .a:hover {
   background-color: #f5f5f5;
 }
-.dropdown-menu .active > a,
-.dropdown-menu .active > .a {
+.dropdown-menu li.active > a,
+.dropdown-menu li.active > .a {
   background-color: #f5f5f5;
 }
 
@@ -3120,7 +3120,7 @@ pre code {
 }
 .dropdown-toggle-btn ~ .dropdown-menu {
   min-width: 100%;
-  padding-top: 56px !important;
+  padding-top: 56px;
   top: -14px;
   left: 0;
   -webkit-transform: scale(1, 0);
@@ -4041,8 +4041,12 @@ input[type="checkbox"]:checked + .switch-toggle-red:active:after, input[type="ra
 .nav:after {
   clear: both;
 }
-.nav a,
-.nav .a {
+.nav li {
+  display: block;
+  position: relative;
+}
+.nav li > a,
+.nav li > .a {
   -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
@@ -4055,15 +4059,11 @@ input[type="checkbox"]:checked + .switch-toggle-red:active:after, input[type="ra
   padding: 0 16px;
   position: relative;
 }
-.nav a:focus, .nav a:hover,
-.nav .a:focus,
-.nav .a:hover {
+.nav li > a:focus, .nav li > a:hover,
+.nav li > .a:focus,
+.nav li > .a:hover {
   text-decoration: none;
 }
-.nav li {
-  display: block;
-  position: relative;
-}
 .nav ul {
   margin: 0;
   padding: 0;