Restore submenu support

1 files changed, 64 insertions, 4 deletions

diff --git a/less/dropdowns.less b/less/dropdowns.less
index 1eb4b2646..02d4a87ba 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -77,8 +77,10 @@
 
 // Hover/Focus state
 // -----------
-.dropdown-menu li > a:hover,
-.dropdown-menu li > a:focus {
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus,
+.dropdown-submenu:hover > a,
+.dropdown-submenu:focus > a {
   text-decoration: none;
   color: @dropdown-link-color-hover;
   #gradient > .vertical(@dropdown-link-background-hover, darken(@dropdown-link-background-hover, 5%));
@@ -148,8 +150,66 @@
   }
 }
 
+// Sub menus
+// ---------------------------
+.dropdown-submenu {
+  position: relative;
+}
+// Default dropdowns
+.dropdown-submenu > .dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-top: -6px;
+  margin-left: -1px;
+  border-top-left-radius: 0; // Nuke the closest corner as appropriate
+}
+.dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+}
+
+// Dropups
+.dropup .dropdown-submenu > .dropdown-menu {
+  top: auto;
+  bottom: 0;
+  margin-top: 0;
+  margin-bottom: -2px;
+  border-bottom-left-radius: 0; // Nuke the closest corner as appropriate
+}
+
+// Caret to indicate there is a submenu
+.dropdown-submenu > a:after {
+  display: block;
+  content: " ";
+  float: right;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 5px 0 5px 5px;
+  border-left-color: darken(@dropdown-background, 20%);
+  margin-top: 5px;
+  margin-right: -10px;
+}
+.dropdown-submenu:hover > a:after {
+  border-left-color: @dropdown-link-color-hover;
+}
+
+// Left aligned submenus
+.dropdown-submenu.pull-left {
+  // Undo the float
+  // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
+  float: none;
+
+  // Positioning the submenu
+  > .dropdown-menu {
+    left: -100%;
+    margin-left: 10px;
+    border-top-right-radius: 0; // Remove the rounded corner here
+  }
+}
+
 // Tweak nav headers
-// -----------------
+// ---------------------------
 // Increase padding from 15px to 20px on sides
 .dropdown .dropdown-menu .nav-header {
   padding-left: 20px;
@@ -157,7 +217,7 @@
 }
 
 // Typeahead
-// ---------
+// ---------------------------
 .typeahead {
   z-index: 1051;
 }