diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index fc9190fbe6..8206d0d537 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4225,6 +4225,7 @@ input[type="submit"].btn.btn-mini {
 
 .nav-collapse.collapse {
   height: auto;
+  overflow: visible;
 }
 
 .navbar .brand {
diff --git a/docs/components.html b/docs/components.html
index ac44cca29f..ea0e12272b 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1266,7 +1266,7 @@
                     <span class="icon-bar"></span>
                   </a>
                   <a class="brand" href="#">Title</a>
-                  <div class="nav-collapse">
+                  <div class="nav-collapse collapse">
                     <ul class="nav">
                       <li class="active"><a href="#">Home</a></li>
                       <li><a href="#">Link</a></li>
@@ -1322,7 +1322,7 @@
       &lt;a class="brand" href="#"&gt;Project name&lt;/a&gt;
 
       &lt;!-- Everything you want hidden at 940px or less, place within here --&gt;
-      &lt;div class="nav-collapse"&gt;
+      &lt;div class="nav-collapse collapse"&gt;
         &lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt;
       &lt;/div&gt;
 
@@ -1350,7 +1350,7 @@
                     <span class="icon-bar"></span>
                   </a>
                   <a class="brand" href="#">Title</a>
-                  <div class="nav-collapse subnav-collapse">
+                  <div class="nav-collapse collapse">
                     <ul class="nav">
                       <li class="active"><a href="#">Home</a></li>
                       <li><a href="#">Link</a></li>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 99da9da7c3..19f2e67e2a 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1195,7 +1195,7 @@
                     <span class="icon-bar"></span>
                   </a>
                   <a class="brand" href="#">{{_i}}Title{{/i}}</a>
-                  <div class="nav-collapse">
+                  <div class="nav-collapse collapse">
                     <ul class="nav">
                       <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
                       <li><a href="#">{{_i}}Link{{/i}}</a></li>
@@ -1251,7 +1251,7 @@
       &lt;a class="brand" href="#"&gt;{{_i}}Project name{{/i}}&lt;/a&gt;
 
       &lt;!-- {{_i}}Everything you want hidden at 940px or less, place within here{{/i}} --&gt;
-      &lt;div class="nav-collapse"&gt;
+      &lt;div class="nav-collapse collapse"&gt;
         &lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt;
       &lt;/div&gt;
 
@@ -1279,7 +1279,7 @@
                     <span class="icon-bar"></span>
                   </a>
                   <a class="brand" href="#">{{_i}}Title{{/i}}</a>
-                  <div class="nav-collapse subnav-collapse">
+                  <div class="nav-collapse collapse">
                     <ul class="nav">
                       <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
                       <li><a href="#">{{_i}}Link{{/i}}</a></li>
diff --git a/less/navbar.less b/less/navbar.less
index 33c90694ef..58621b4739 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -41,6 +41,7 @@
 // Override the default collapsed state
 .nav-collapse.collapse {
   height: auto;
+  overflow: visible;
 }
 
 
diff --git a/less/tests/navbar-fixed-top.html b/less/tests/navbar-fixed-top.html
index d454b65f8f..97b86fdef1 100644
--- a/less/tests/navbar-fixed-top.html
+++ b/less/tests/navbar-fixed-top.html
@@ -42,11 +42,23 @@
             <span class="icon-bar"></span>
           </a>
           <a class="brand" href="#">Project name</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
             <ul class="nav">
               <li class="active"><a href="#">Home</a></li>
               <li><a href="#about">About</a></li>
               <li><a href="#contact">Contact</a></li>
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                <ul class="dropdown-menu">
+                  <li><a href="#">Action</a></li>
+                  <li><a href="#">Another action</a></li>
+                  <li><a href="#">Something else here</a></li>
+                  <li class="divider"></li>
+                  <li class="nav-header">Nav header</li>
+                  <li><a href="#">Separated link</a></li>
+                  <li><a href="#">One more separated link</a></li>
+                </ul>
+              </li>
             </ul>
             <ul class="nav pull-right">
               <li><a href="./navbar.html">Default</a></li>
diff --git a/less/tests/navbar-static-top.html b/less/tests/navbar-static-top.html
index ea131d4537..505ecb6086 100644
--- a/less/tests/navbar-static-top.html
+++ b/less/tests/navbar-static-top.html
@@ -44,11 +44,23 @@
             <span class="icon-bar"></span>
           </a>
           <a class="brand" href="#">Project name</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
             <ul class="nav">
               <li class="active"><a href="#">Home</a></li>
               <li><a href="#about">About</a></li>
               <li><a href="#contact">Contact</a></li>
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                <ul class="dropdown-menu">
+                  <li><a href="#">Action</a></li>
+                  <li><a href="#">Another action</a></li>
+                  <li><a href="#">Something else here</a></li>
+                  <li class="divider"></li>
+                  <li class="nav-header">Nav header</li>
+                  <li><a href="#">Separated link</a></li>
+                  <li><a href="#">One more separated link</a></li>
+                </ul>
+              </li>
             </ul>
           <ul class="nav pull-right">
             <li><a href="./navbar.html">Default</a></li>
diff --git a/less/tests/navbar.html b/less/tests/navbar.html
index 342b92167e..c72da71a44 100644
--- a/less/tests/navbar.html
+++ b/less/tests/navbar.html
@@ -47,11 +47,23 @@
               <span class="icon-bar"></span>
             </a>
             <a class="brand" href="#">Project name</a>
-            <div class="nav-collapse">
+            <div class="nav-collapse collapse">
               <ul class="nav">
                 <li class="active"><a href="#">Home</a></li>
                 <li><a href="#about">About</a></li>
                 <li><a href="#contact">Contact</a></li>
+                <li class="dropdown">
+                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                  <ul class="dropdown-menu">
+                    <li><a href="#">Action</a></li>
+                    <li><a href="#">Another action</a></li>
+                    <li><a href="#">Something else here</a></li>
+                    <li class="divider"></li>
+                    <li class="nav-header">Nav header</li>
+                    <li><a href="#">Separated link</a></li>
+                    <li><a href="#">One more separated link</a></li>
+                  </ul>
+                </li>
               </ul>
               <ul class="nav pull-right">
                 <li class="active"><a href="./navbar.html">Default</a></li>