fix dropdowns for active state in dropdown menus

2 files changed, 37 insertions, 6 deletions

diff --git a/lib/dropdowns.less b/lib/dropdowns.less
index 484cbbcd7..85f74b632 100644
--- a/lib/dropdowns.less
+++ b/lib/dropdowns.less
@@ -71,9 +71,8 @@
   }
 }
 
-// Hover & Active states
-.dropdown-menu a:hover,
-.dropdown-menu .active > a {
+// Hover state
+.dropdown-menu li > a:hover {
   color: #fff;
   text-decoration: none;
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
@@ -82,6 +81,14 @@
   .box-shadow(@shadow);
 }
 
+// Active state
+.dropdown-menu .active > a,
+.dropdown-menu .active > a:hover {
+  color: #fff;
+  background-color: #999;
+  background-image: none; // remove the gradient
+}
+
 // Open state for the dropdown
 .dropdown.open {
   .dropdown-toggle {
diff --git a/lib/navs.less b/lib/navs.less
index 804a273bb..432ab3cbd 100644
--- a/lib/navs.less
+++ b/lib/navs.less
@@ -101,8 +101,8 @@
   }
 }
 // Active state, and it's :hover to override normal :hover
-.tabs .active > a,
-.tabs .active > a:hover {
+.tabs > .active > a,
+.tabs > .active > a:hover {
   color: @gray;
   background-color: @white;
   border: 1px solid #ddd;
@@ -183,6 +183,10 @@
 .pills .dropdown-menu {
   .border-radius(4px);
 }
+
+// Default dropdown links
+// -------------------------
+// Make carets use linkColor to start
 .tabs .dropdown-toggle .caret,
 .pills .dropdown-toggle .caret {
   border-top-color: @linkColor;
@@ -192,12 +196,32 @@
 .pills .dropdown-toggle:hover .caret {
   border-top-color: @linkColorHover;
 }
+
+// Active dropdown links
+// -------------------------
+.tabs .active .dropdown-toggle .caret,
+.pills .active .dropdown-toggle .caret {
+  border-top-color: #333;
+}
+
+// Active:hover dropdown links
+// -------------------------
+.nav > .dropdown.active > a:hover {
+  color: #000;
+  cursor: pointer;
+}
+
+// Open dropdowns
+// -------------------------
 .tabs .open .dropdown-toggle,
-.pills .open .dropdown-toggle {
+.pills .open .dropdown-toggle,
+.nav > .open.active > a:hover {
+  color: #fff;
   background-color: #999;
   border-color: #999;
 }
 .nav .open .caret,
+.nav .open.active .caret,
 .nav .open a:hover .caret {
   border-top-color: #fff;
   .opacity(100);