From 9d5c4312232ebb53b2499ed495851c0d61eb648c Mon Sep 17 00:00:00 2001
From: Mark Otto <markotto@twitter.com>
Date: Fri, 27 Jul 2012 10:06:54 -0700
Subject: [PATCH] add basic support for sub menus in dropdown menus

---
 docs/assets/css/bootstrap.css            | 31 +++++++++++++++----
 docs/components.html                     | 19 ++++++------
 docs/templates/pages/components.mustache | 19 ++++++------
 less/dropdowns.less                      | 38 ++++++++++++++++++------
 4 files changed, 74 insertions(+), 33 deletions(-)

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 87922cf880..f24baf5810 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2687,7 +2687,8 @@ table .span24 {
 }
 
 .dropdown-menu li > a:hover,
-.dropdown-menu li > a:focus {
+.dropdown-menu li > a:focus,
+.dropdown-submenu:hover > a {
   color: #ffffff;
   text-decoration: none;
   background-color: #0088cc;
@@ -2728,11 +2729,6 @@ table .span24 {
   background-color: transparent;
 }
 
-.dropdown .dropdown-menu .nav-header {
-  padding-right: 20px;
-  padding-left: 20px;
-}
-
 .open {
   *z-index: 1000;
 }
@@ -2760,6 +2756,29 @@ table .span24 {
   margin-bottom: 1px;
 }
 
+.dropdown-submenu {
+  position: relative;
+}
+
+.dropdown-submenu > .dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-top: -5px;
+  margin-left: -1px;
+  -webkit-border-radius: 0 6px 6px 6px;
+     -moz-border-radius: 0 6px 6px 6px;
+          border-radius: 0 6px 6px 6px;
+}
+
+.dropdown-submenu:hover .dropdown-menu {
+  display: block;
+}
+
+.dropdown .dropdown-menu .nav-header {
+  padding-right: 20px;
+  padding-left: 20px;
+}
+
 .typeahead {
   margin-top: 2px;
   -webkit-border-radius: 4px;
diff --git a/docs/components.html b/docs/components.html
index 181a8cbfcd..c36eec9403 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -122,7 +122,16 @@
                 <li><a tabindex="-1" href="#">Another action</a></li>
                 <li><a tabindex="-1" href="#">Something else here</a></li>
                 <li class="divider"></li>
-                <li><a tabindex="-1" href="#">Separated link</a></li>
+                <li class="dropdown-submenu">
+                  <a tabindex="-1" href="#">Separated link</a>
+                  <ul class="dropdown-menu">
+                    <li><a tabindex="-1" href="#">Second level link</a></li>
+                    <li><a tabindex="-1" href="#">Second level link</a></li>
+                    <li><a tabindex="-1" href="#">Second level link</a></li>
+                    <li><a tabindex="-1" href="#">Second level link</a></li>
+                    <li><a tabindex="-1" href="#">Second level link</a></li>
+                  </ul>
+                </li>
               </ul>
             </div>
           </div>
@@ -136,10 +145,6 @@
 &lt;/ul&gt;
 </pre>
 
-
-          <hr class="bs-docs-separator">
-
-
           <h2>Markup</h2>
           <p>Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then just create the menu.</p>
 
@@ -156,10 +161,6 @@
 &lt;/div&gt;
 </pre>
 
-
-          <hr class="bs-docs-separator">
-
-
           <h2>Options</h2>
           <p>...</p>
 
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 52d5137c08..e9022ee125 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -51,7 +51,16 @@
                 <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
                 <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
                 <li class="divider"></li>
-                <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
+                <li class="dropdown-submenu">
+                  <a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a>
+                  <ul class="dropdown-menu">
+                    <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
+                    <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
+                    <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
+                    <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
+                    <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
+                  </ul>
+                </li>
               </ul>
             </div>
           </div>{{! /example }}
@@ -65,10 +74,6 @@
 &lt;/ul&gt;
 </pre>
 
-
-          <hr class="bs-docs-separator">
-
-
           <h2>{{_i}}Markup{{/i}}</h2>
           <p>{{_i}}Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then just create the menu.{{/i}}</p>
 
@@ -85,10 +90,6 @@
 &lt;/div&gt;
 </pre>
 
-
-          <hr class="bs-docs-separator">
-
-
           <h2>{{_i}}Options{{/i}}</h2>
           <p>{{_i}}...{{/i}}</p>
 
diff --git a/less/dropdowns.less b/less/dropdowns.less
index 5f62d27f04..a36c3a416f 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -96,7 +96,8 @@
 // Hover state
 // -----------
 .dropdown-menu li > a:hover,
-.dropdown-menu li > a:focus {
+.dropdown-menu li > a:focus,
+.dropdown-submenu:hover > a {
   text-decoration: none;
   color: @dropdownLinkColorHover;
   background-color: @dropdownLinkBackgroundHover;
@@ -128,14 +129,6 @@
   cursor: default;
 }
 
-// Tweak nav headers
-// -----------------
-// Increase padding from 15px to 20px on sides
-.dropdown .dropdown-menu .nav-header {
-  padding-left: 20px;
-  padding-right: 20px;
-}
-
 // Open state for the dropdown
 // ---------------------------
 .open {
@@ -175,6 +168,33 @@
   }
 }
 
+// Sub menus
+// ---------------------------
+.dropdown-submenu {
+  position: relative;
+}
+.dropdown-submenu > .dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-top: -5px;
+  margin-left: -1px;
+  -webkit-border-radius: 0 6px 6px 6px;
+     -moz-border-radius: 0 6px 6px 6px;
+          border-radius: 0 6px 6px 6px;
+}
+.dropdown-submenu:hover .dropdown-menu {
+  display: block;
+}
+
+
+// Tweak nav headers
+// -----------------
+// Increase padding from 15px to 20px on sides
+.dropdown .dropdown-menu .nav-header {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
 // Typeahead
 // ---------
 .typeahead {