From 6ccf588a8e08a9f99e6a56f9201a4348eb946cde Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 17 Feb 2013 13:35:14 -0800
Subject: [PATCH] Restore submenu support

---
 docs/assets/css/bootstrap.css | 58 +++++++++++++++++++++-
 docs/assets/css/docs.css      | 14 ++++++
 docs/components.html          | 93 ++++++++++++++++++++++++++++++++++-
 less/dropdowns.less           | 68 +++++++++++++++++++++++--
 4 files changed, 225 insertions(+), 8 deletions(-)

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 38ae1fdeb2..b45d7e101e 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2685,8 +2685,10 @@ fieldset[disabled] .btn-link:focus {
   white-space: nowrap;
 }
 
-.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 {
   color: #ffffff;
   text-decoration: none;
   background-color: #357ebd;
@@ -2753,6 +2755,58 @@ fieldset[disabled] .btn-link:focus {
   margin-bottom: 1px;
 }
 
+.dropdown-submenu {
+  position: relative;
+}
+
+.dropdown-submenu > .dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-top: -6px;
+  margin-left: -1px;
+  border-top-left-radius: 0;
+}
+
+.dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+}
+
+.dropup .dropdown-submenu > .dropdown-menu {
+  top: auto;
+  bottom: 0;
+  margin-top: 0;
+  margin-bottom: -2px;
+  border-bottom-left-radius: 0;
+}
+
+.dropdown-submenu > a:after {
+  display: block;
+  float: right;
+  width: 0;
+  height: 0;
+  margin-top: 5px;
+  margin-right: -10px;
+  border-color: transparent;
+  border-left-color: #cccccc;
+  border-style: solid;
+  border-width: 5px 0 5px 5px;
+  content: " ";
+}
+
+.dropdown-submenu:hover > a:after {
+  border-left-color: #ffffff;
+}
+
+.dropdown-submenu.pull-left {
+  float: none;
+}
+
+.dropdown-submenu.pull-left > .dropdown-menu {
+  left: -100%;
+  margin-left: 10px;
+  border-top-right-radius: 0;
+}
+
 .dropdown .dropdown-menu .nav-header {
   padding-right: 20px;
   padding-left: 20px;
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index e2cc921b87..8a06cbc457 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -295,6 +295,20 @@ section > ul li {
   margin-right: auto;
 }
 
+/* Example dropdowns */
+.bs-docs-example > .dropdown > .dropdown-menu,
+.bs-docs-example-submenu > .pull-left > .dropup > .dropdown-menu,
+.bs-docs-example-submenu > .pull-left > .dropdown > .dropdown-menu {
+  position: static;
+  display: block;
+  margin-bottom: 5px;
+}
+.bs-docs-example-submenu {
+  min-height: 180px;
+}
+.bs-docs-example-submenu > .pull-left + .pull-left {
+  margin-left: 20px;
+}
 
 
 /* Example templates
diff --git a/docs/components.html b/docs/components.html
index bc5d7a2b37..b80eb6e714 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -53,7 +53,7 @@ title: Components
           <p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
           <div class="bs-docs-example">
             <div class="dropdown clearfix">
-              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
+              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                 <li><a tabindex="-1" href="#">Action</a></li>
                 <li><a tabindex="-1" href="#">Another action</a></li>
                 <li><a tabindex="-1" href="#">Something else here</a></li>
@@ -87,7 +87,7 @@ title: Components
           <p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>
           <div class="bs-docs-example">
             <div class="dropdown clearfix">
-              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
+              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                 <li><a tabindex="-1" href="#">Regular link</a></li>
                 <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
                 <li><a tabindex="-1" href="#">Another link</a></li>
@@ -101,6 +101,95 @@ title: Components
   <li><a tabindex="-1" href="#">Another link</a></li>
 </ul>
 {% endhighlight %}
+
+          <h3>Sub menus on dropdowns</h3>
+          <p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
+          <div class="bs-docs-example bs-docs-example-submenu">
+
+            <div class="pull-left">
+              <p class="muted">Default</p>
+              <div class="dropdown clearfix">
+                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+                  <li><a tabindex="-1" href="#">Action</a></li>
+                  <li><a tabindex="-1" href="#">Another action</a></li>
+                  <li><a tabindex="-1" href="#">Something else here</a></li>
+                  <li class="divider"></li>
+                  <li class="dropdown-submenu">
+                    <a tabindex="-1" href="#">More options</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>
+
+            <div class="pull-left">
+              <p class="muted">Dropup</p>
+              <div class="dropup">
+                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+                  <li><a tabindex="-1" href="#">Action</a></li>
+                  <li><a tabindex="-1" href="#">Another action</a></li>
+                  <li><a tabindex="-1" href="#">Something else here</a></li>
+                  <li class="divider"></li>
+                  <li class="dropdown-submenu">
+                    <a tabindex="-1" href="#">More options</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>
+
+            <div class="pull-left">
+              <p class="muted">Left submenu</p>
+              <div class="dropdown">
+                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+                  <li><a tabindex="-1" href="#">Action</a></li>
+                  <li><a tabindex="-1" href="#">Another action</a></li>
+                  <li><a tabindex="-1" href="#">Something else here</a></li>
+                  <li class="divider"></li>
+                  <li class="dropdown-submenu pull-left">
+                    <a tabindex="-1" href="#">More options</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>
+
+          </div>
+{% highlight html linenos %}
+<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+  ...
+  <li class="dropdown-submenu pull-left">
+    <a tabindex="-1" href="#">More options</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>
+{% endhighlight %}
+
         </section>
 
 
diff --git a/less/dropdowns.less b/less/dropdowns.less
index 1eb4b26460..02d4a87baf 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;
 }