add temp second topbar to nav section, fix it's compatibility issues

diff --git a/bootstrap-1.2.0.css b/bootstrap-1.2.0.css
index f78b533e61a8fd37eac47af003b9ec14e3edd9e2..adb382e0fdf6b00bc768349cabc509a0eb2eea0d 100644 (file)
--- a/bootstrap-1.2.0.css
+++ b/bootstrap-1.2.0.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Fri Sep  2 00:29:45 PDT 2011
+ * Date: Fri Sep  2 00:49:39 PDT 2011
  */
 /* Reset.less
  * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here      that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -1193,62 +1193,89 @@ table .headerSortUp.purple, table .headerSortDown.purple {
   -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
 }
-.topbar > ul, .nav {
+.topbar div > ul, .nav {
   display: block;
   float: left;
   margin: 0 10px 0 0;
   position: relative;
   left: 0;
 }
-.topbar > ul > li, .nav > li {
+.topbar div > ul > li, .nav > li {
   display: block;
   float: left;
 }
-.topbar > ul a, .nav a {
+.topbar div > ul a, .nav a {
   display: block;
   float: none;
   padding: 10px 10px 11px;
   line-height: 19px;
   text-decoration: none;
 }
-.topbar > ul a:hover, .nav a:hover {
+.topbar div > ul a:hover, .nav a:hover {
   color: #fff;
   text-decoration: none;
 }
-.topbar > ul .active a, .nav .active a {
+.topbar div > ul .active a, .nav .active a {
   background-color: #222;
   background-color: rgba(0, 0, 0, 0.5);
 }
-.topbar > ul.secondary-nav, .nav.secondary-nav {
+.topbar div > ul.secondary-nav, .nav.secondary-nav {
   float: right;
   margin-left: 10px;
   margin-right: 0;
 }
-.topbar > ul.secondary-nav .dropdown-menu, .nav.secondary-nav .dropdown-menu {
+.topbar div > ul.secondary-nav .dropdown-menu, .nav.secondary-nav .dropdown-menu {
   right: 0;
 }
-.topbar > ul .dropdown-toggle:hover,
+.topbar div > ul a.menu:hover,
+.nav a.menu:hover,
+.topbar div > ul li.open .menu,
+.nav li.open .menu,
+.topbar div > ul .dropdown-toggle:hover,
 .nav .dropdown-toggle:hover,
-.topbar > ul .dropdown.open .dropdown-toggle,
+.topbar div > ul .dropdown.open .dropdown-toggle,
 .nav .dropdown.open .dropdown-toggle {
   background: #444;
   background: rgba(255, 255, 255, 0.05);
 }
-.topbar > ul .dropdown-menu, .nav .dropdown-menu {
+.topbar div > ul .menu-dropdown,
+.nav .menu-dropdown,
+.topbar div > ul .dropdown-menu,
+.nav .dropdown-menu {
   background-color: #333;
 }
-.topbar > ul .dropdown-menu .dropdown-toggle, .nav .dropdown-menu .dropdown-toggle {
+.topbar div > ul .menu-dropdown a.menu,
+.nav .menu-dropdown a.menu,
+.topbar div > ul .dropdown-menu a.menu,
+.nav .dropdown-menu a.menu,
+.topbar div > ul .menu-dropdown .dropdown-toggle,
+.nav .menu-dropdown .dropdown-toggle,
+.topbar div > ul .dropdown-menu .dropdown-toggle,
+.nav .dropdown-menu .dropdown-toggle {
   color: #fff;
 }
-.topbar > ul .dropdown-menu .dropdown-toggle.open, .nav .dropdown-menu .dropdown-toggle.open {
+.topbar div > ul .menu-dropdown a.menu.open,
+.nav .menu-dropdown a.menu.open,
+.topbar div > ul .dropdown-menu a.menu.open,
+.nav .dropdown-menu a.menu.open,
+.topbar div > ul .menu-dropdown .dropdown-toggle.open,
+.nav .menu-dropdown .dropdown-toggle.open,
+.topbar div > ul .dropdown-menu .dropdown-toggle.open,
+.nav .dropdown-menu .dropdown-toggle.open {
   background: #444;
   background: rgba(255, 255, 255, 0.05);
 }
-.topbar > ul .dropdown-menu li a, .nav .dropdown-menu li a {
+.topbar div > ul .menu-dropdown li a,
+.nav .menu-dropdown li a,
+.topbar div > ul .dropdown-menu li a,
+.nav .dropdown-menu li a {
   color: #999;
   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
 }
-.topbar > ul .dropdown-menu li a:hover, .nav .dropdown-menu li a:hover {
+.topbar div > ul .menu-dropdown li a:hover,
+.nav .menu-dropdown li a:hover,
+.topbar div > ul .dropdown-menu li a:hover,
+.nav .dropdown-menu li a:hover {
   background-color: #191919;
   background-repeat: repeat-x;
   background-image: -khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));
@@ -1260,14 +1287,20 @@ table .headerSortUp.purple, table .headerSortDown.purple {
   background-image: linear-gradient(top, #292929, #191919);
   color: #fff;
 }
-.topbar > ul .dropdown-menu .divider, .nav .dropdown-menu .divider {
+.topbar div > ul .menu-dropdown .divider,
+.nav .menu-dropdown .divider,
+.topbar div > ul .dropdown-menu .divider,
+.nav .dropdown-menu .divider {
   background-color: #222;
   border-color: #444;
 }
-.dropdown {
+.topbar ul .menu-dropdown li a, .topbar ul .dropdown-menu li a {
+  padding: 4px 15px;
+}
+li.menu, .dropdown {
   position: relative;
 }
-.dropdown-toggle:after {
+a.menu:after, .dropdown-toggle:after {
   width: 0;
   height: 0;
   display: inline-block;
@@ -1284,7 +1317,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
   -moz-opacity: 0.5;
   opacity: 0.5;
 }
-.dropdown-menu {
+.menu-dropdown, .dropdown-menu {
   background-color: #fff;
   float: left;
   display: none;
@@ -1311,12 +1344,12 @@ table .headerSortUp.purple, table .headerSortDown.purple {
   -moz-background-clip: padding-box;
   background-clip: padding-box;
 }
-.dropdown-menu li {
+.menu-dropdown li, .dropdown-menu li {
   float: none;
   display: block;
   background-color: none;
 }
-.dropdown-menu a {
+.menu-dropdown a, .dropdown-menu a {
   display: block;
   padding: 4px 15px;
   clear: both;
@@ -1325,7 +1358,7 @@ table .headerSortUp.purple, table .headerSortDown.purple {
   color: #808080;
   text-shadow: 0 1px 0 #fff;
 }
-.dropdown-menu a:hover {
+.menu-dropdown a:hover, .dropdown-menu a:hover {
   background-color: #dddddd;
   background-repeat: repeat-x;
   background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
@@ -1341,18 +1374,24 @@ table .headerSortUp.purple, table .headerSortDown.purple {
   -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
   box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
 }
-.dropdown-menu .divider {
+.menu-dropdown .divider, .dropdown-menu .divider {
   height: 1px;
   margin: 5px 0;
   overflow: hidden;
   background-color: #eee;
   border-bottom: 1px solid #fff;
 }
+.open .menu,
+.dropdown.open .menu,
+.open .dropdown-toggle,
 .dropdown.open .dropdown-toggle {
   color: #fff;
   background: #ccc;
   background: rgba(0, 0, 0, 0.3);
 }
+.open .menu-dropdown,
+.dropdown.open .menu-dropdown,
+.open .dropdown-menu,
 .dropdown.open .dropdown-menu {
   display: block;
 }

diff --git a/bootstrap-1.2.0.min.css b/bootstrap-1.2.0.min.css
index a17b01bb6c78989b665ce4c0ec09bb528522ded3..e956e7901a47e98099d5419b5a72860c064ad353 100644 (file)
--- a/bootstrap-1.2.0.min.css
+++ b/bootstrap-1.2.0.min.css
@@ -184,21 +184,22 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
 .topbar input:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#fff;}
 .topbar input:focus,.topbar input.focused{outline:none;background-color:#fff;color:#404040;text-shadow:0 1px 0 #fff;border:0;padding:5px 10px;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);}
 .topbar-inner,.topbar .fill{background-color:#222;background-color:#222222;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-moz-linear-gradient(top, #333333, #222222);background-image:-ms-linear-gradient(top, #333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(top, #333333, #222222);background-image:-o-linear-gradient(top, #333333, #222222);background-image:linear-gradient(top, #333333, #222222);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);}
-.topbar>ul,.nav{display:block;float:left;margin:0 10px 0 0;position:relative;left:0;}.topbar>ul>li,.nav>li{display:block;float:left;}
-.topbar>ul a,.nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;text-decoration:none;}.topbar>ul a:hover,.nav a:hover{color:#fff;text-decoration:none;}
-.topbar>ul .active a,.nav .active a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
-.topbar>ul.secondary-nav,.nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}.topbar>ul.secondary-nav .dropdown-menu,.nav.secondary-nav .dropdown-menu{right:0;}
-.topbar>ul .dropdown-toggle:hover,.nav .dropdown-toggle:hover,.topbar>ul .dropdown.open .dropdown-toggle,.nav .dropdown.open .dropdown-toggle{background:#444;background:rgba(255, 255, 255, 0.05);}
-.topbar>ul .dropdown-menu,.nav .dropdown-menu{background-color:#333;}.topbar>ul .dropdown-menu .dropdown-toggle,.nav .dropdown-menu .dropdown-toggle{color:#fff;}.topbar>ul .dropdown-menu .dropdown-toggle.open,.nav .dropdown-menu .dropdown-toggle.open{background:#444;background:rgba(255, 255, 255, 0.05);}
-.topbar>ul .dropdown-menu li a,.nav .dropdown-menu li a{color:#999;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}.topbar>ul .dropdown-menu li a:hover,.nav .dropdown-menu li a:hover{background-color:#191919;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));background-image:-moz-linear-gradient(top, #292929, #191919);background-image:-ms-linear-gradient(top, #292929, #191919);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));background-image:-webkit-linear-gradient(top, #292929, #191919);background-image:-o-linear-gradient(top, #292929, #191919);background-image:linear-gradient(top, #292929, #191919);color:#fff;}
-.topbar>ul .dropdown-menu .divider,.nav .dropdown-menu .divider{background-color:#222;border-color:#444;}
-.dropdown{position:relative;}
-.dropdown-toggle:after{width:0;height:0;display:inline-block;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #fff;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}
-.dropdown-menu{background-color:#fff;float:left;display:none;position:absolute;top:40px;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:6px 0;zoom:1;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:0 1px 1px;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.dropdown-menu li{float:none;display:block;background-color:none;}
-.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#808080;text-shadow:0 1px 0 #fff;}.dropdown-menu a:hover{background-color:#dddddd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);color:#404040;text-decoration:none;-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);}
-.dropdown-menu .divider{height:1px;margin:5px 0;overflow:hidden;background-color:#eee;border-bottom:1px solid #fff;}
-.dropdown.open .dropdown-toggle{color:#fff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
-.dropdown.open .dropdown-menu{display:block;}
+.topbar div>ul,.nav{display:block;float:left;margin:0 10px 0 0;position:relative;left:0;}.topbar div>ul>li,.nav>li{display:block;float:left;}
+.topbar div>ul a,.nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;text-decoration:none;}.topbar div>ul a:hover,.nav a:hover{color:#fff;text-decoration:none;}
+.topbar div>ul .active a,.nav .active a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
+.topbar div>ul.secondary-nav,.nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}.topbar div>ul.secondary-nav .dropdown-menu,.nav.secondary-nav .dropdown-menu{right:0;}
+.topbar div>ul a.menu:hover,.nav a.menu:hover,.topbar div>ul li.open .menu,.nav li.open .menu,.topbar div>ul .dropdown-toggle:hover,.nav .dropdown-toggle:hover,.topbar div>ul .dropdown.open .dropdown-toggle,.nav .dropdown.open .dropdown-toggle{background:#444;background:rgba(255, 255, 255, 0.05);}
+.topbar div>ul .menu-dropdown,.nav .menu-dropdown,.topbar div>ul .dropdown-menu,.nav .dropdown-menu{background-color:#333;}.topbar div>ul .menu-dropdown a.menu,.nav .menu-dropdown a.menu,.topbar div>ul .dropdown-menu a.menu,.nav .dropdown-menu a.menu,.topbar div>ul .menu-dropdown .dropdown-toggle,.nav .menu-dropdown .dropdown-toggle,.topbar div>ul .dropdown-menu .dropdown-toggle,.nav .dropdown-menu .dropdown-toggle{color:#fff;}.topbar div>ul .menu-dropdown a.menu.open,.nav .menu-dropdown a.menu.open,.topbar div>ul .dropdown-menu a.menu.open,.nav .dropdown-menu a.menu.open,.topbar div>ul .menu-dropdown .dropdown-toggle.open,.nav .menu-dropdown .dropdown-toggle.open,.topbar div>ul .dropdown-menu .dropdown-toggle.open,.nav .dropdown-menu .dropdown-toggle.open{background:#444;background:rgba(255, 255, 255, 0.05);}
+.topbar div>ul .menu-dropdown li a,.nav .menu-dropdown li a,.topbar div>ul .dropdown-menu li a,.nav .dropdown-menu li a{color:#999;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}.topbar div>ul .menu-dropdown li a:hover,.nav .menu-dropdown li a:hover,.topbar div>ul .dropdown-menu li a:hover,.nav .dropdown-menu li a:hover{background-color:#191919;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));background-image:-moz-linear-gradient(top, #292929, #191919);background-image:-ms-linear-gradient(top, #292929, #191919);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));background-image:-webkit-linear-gradient(top, #292929, #191919);background-image:-o-linear-gradient(top, #292929, #191919);background-image:linear-gradient(top, #292929, #191919);color:#fff;}
+.topbar div>ul .menu-dropdown .divider,.nav .menu-dropdown .divider,.topbar div>ul .dropdown-menu .divider,.nav .dropdown-menu .divider{background-color:#222;border-color:#444;}
+.topbar ul .menu-dropdown li a,.topbar ul .dropdown-menu li a{padding:4px 15px;}
+li.menu,.dropdown{position:relative;}
+a.menu:after,.dropdown-toggle:after{width:0;height:0;display:inline-block;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #fff;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}
+.menu-dropdown,.dropdown-menu{background-color:#fff;float:left;display:none;position:absolute;top:40px;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:6px 0;zoom:1;border-color:#999;border-color:rgba(0, 0, 0, 0.2);border-style:solid;border-width:0 1px 1px;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.menu-dropdown li,.dropdown-menu li{float:none;display:block;background-color:none;}
+.menu-dropdown a,.dropdown-menu a{display:block;padding:4px 15px;clear:both;font-weight:normal;line-height:18px;color:#808080;text-shadow:0 1px 0 #fff;}.menu-dropdown a:hover,.dropdown-menu a:hover{background-color:#dddddd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));background-image:-moz-linear-gradient(top, #eeeeee, #dddddd);background-image:-ms-linear-gradient(top, #eeeeee, #dddddd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd));background-image:-webkit-linear-gradient(top, #eeeeee, #dddddd);background-image:-o-linear-gradient(top, #eeeeee, #dddddd);background-image:linear-gradient(top, #eeeeee, #dddddd);color:#404040;text-decoration:none;-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.025),inset 0 -1px rgba(0, 0, 0, 0.025);}
+.menu-dropdown .divider,.dropdown-menu .divider{height:1px;margin:5px 0;overflow:hidden;background-color:#eee;border-bottom:1px solid #fff;}
+.open .menu,.dropdown.open .menu,.open .dropdown-toggle,.dropdown.open .dropdown-toggle{color:#fff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
+.open .menu-dropdown,.dropdown.open .menu-dropdown,.open .dropdown-menu,.dropdown.open .dropdown-menu{display:block;}
 .tabs,.pills{margin:0 0 20px;padding:0;list-style:none;zoom:1;margin-bottom:18px;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;content:"";}
 .tabs:after,.pills:after{clear:both;}
 .tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;}

diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index aaf76e0f041137c4974894a9527185a545432804..ec4ae3c06e4428e276887a418c418536429a6010 100644 (file)
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -48,10 +48,9 @@ $(document).ready(function(){
   // ===============================
 
   $("body").bind("click", function (e) {
-    $('.dropdown-toggle').parent("li").removeClass("open");
+    $('.dropdown-toggle, .menu').parent("li").removeClass("open");
   });
-
-  $(".dropdown-toggle").click(function (e) {
+  $(".dropdown-toggle, .menu").click(function (e) {
     var $li = $(this).parent("li").toggleClass('open');
     return false;
   });

diff --git a/docs/index.html b/docs/index.html
index 6580be3fad1a860e305f874ae348af97a43215aa..b23beb32158c4d4783ef2430e447db7c6713069c 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -946,6 +946,47 @@
     </div><!-- /topbar -->
   </div><!-- /topbar-wrapper -->
 
+
+  <div class="topbar-wrapper" style="z-index: 4;">
+    <div class="topbar">
+      <div class="fill">
+        <div class="container">
+          <h3><a href="#">Project Name</a></h3>
+          <ul class="">
+            <li class="active"><a href="#">Home</a></li>
+            <li><a href="#">Link</a></li>
+            <li><a href="#">Link</a></li>
+            <li><a href="#">Link</a></li>
+            <li class="menu">
+              <a href="#" class="menu">Dropdown</a>
+              <ul class="menu-dropdown">
+                <li><a href="#">Secondary link</a></li>
+                <li><a href="#">Something else here</a></li>
+                <li class="divider"></li>
+                <li><a href="#">Another link</a></li>
+              </ul>
+            </li>
+          </ul>
+          <form action="">
+            <input type="text" placeholder="Search" />
+          </form>
+          <ul class="secondary-nav">
+            <li class="menu">
+              <a href="#" class="menu">Dropdown</a>
+              <ul class="menu-dropdown">
+                <li><a href="#">Secondary link</a></li>
+                <li><a href="#">Something else here</a></li>
+                <li class="divider"></li>
+                <li><a href="#">Another link</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div><!-- /topbar-inner -->
+    </div><!-- /topbar -->
+  </div><!-- /topbar-wrapper -->
+
+
   <div class="row">
     <div class="span5 columns">
       <h4>What is it</h4>

diff --git a/lib/patterns.less b/lib/patterns.less
index fbb00d8a0fa94765e380d7dac214a5341e7037e6..b1e2cfe0515fe4ad631aa4a03c63dc29ae0e01ba 100644 (file)
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -96,7 +96,7 @@
 
 // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
 .topbar-inner, 
-.topbar .fill { // For backwards compatability
+.topbar .fill { // For backwards compatibility
   background-color: #222;
   #gradient > .vertical(#333, #222);
   @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
@@ -109,8 +109,8 @@
 
 // Topbar Nav
 // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
-// For backwards compatability, leave in .topbar > .ul
-.topbar > ul,
+// For backwards compatibility, leave in .topbar div > ul
+.topbar div > ul,
 .nav {
   display: block;
   float: left;
@@ -147,13 +147,20 @@
     }
   }
   // Dropdowns within the .nav
+  // a.menu:hover and li.open .menu for backwards compatibility
+  a.menu:hover,
+  li.open .menu,
   .dropdown-toggle:hover,
   .dropdown.open .dropdown-toggle {
     background: #444;
     background: rgba(255,255,255,.05);
   }
+  // .menu-dropdown for backwards compatibility
+  .menu-dropdown,
   .dropdown-menu {
     background-color: #333;
+    // a.menu for backwards compatibility
+    a.menu,
     .dropdown-toggle {
       color: #fff;
       &.open {
@@ -176,12 +183,22 @@
   }
 }
 
+// For backwards compatability with new dropdowns, redeclare dropdown link padding
+.topbar ul .menu-dropdown li a,
+.topbar ul .dropdown-menu li a {
+  padding: 4px 15px;
+}
+
 // Dropdown Menus
 // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
+// li.menu for backwards compatibility
+li.menu,
 .dropdown {
   position: relative;
 }
 // The link that is clicked to toggle the dropdown
+// a.menu for backwards compatibility
+a.menu:after,
 .dropdown-toggle:after {
   width: 0;
   height: 0;
@@ -197,6 +214,8 @@
   .opacity(50);
 }
 // The dropdown menu (ul)
+// .menu-dropdown for backwards compatibility
+.menu-dropdown,
 .dropdown-menu {
   background-color: #fff;
   float: left;
@@ -252,12 +271,18 @@
   }
 }
 // Open state for the dropdown
+// .open for backwards compatibility
+.open,
 .dropdown.open {
+  // .menu for backwards compatibility
+  .menu,
   .dropdown-toggle {
     color: #fff;
     background: #ccc;
     background: rgba(0,0,0,.3);
   }
+  // .menu-dropdown for backwards compatibility
+  .menu-dropdown,
   .dropdown-menu {
     display: block;
   }