}
.dropdown-menu > li > a:hover,
-.dropdown-menu > li > a:focus,
-.dropdown-submenu:hover > a,
-.dropdown-submenu:focus > a {
+.dropdown-menu > li > a:focus {
color: #ffffff;
text-decoration: none;
background-color: #357ebd;
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;
<li><a tabindex="-1" href="#">Another link</a></li>
</ul>
{% endhighlight %}
-
- <h3 id="dropdowns-submenus">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-example bs-example-submenu">
-
- <div class="pull-left">
- <p class="text-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="text-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="text-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 %}
-<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 %}
-
</div>
// Hover/Focus state
// -----------
.dropdown-menu > li > a:hover,
-.dropdown-menu > li > a:focus,
-.dropdown-submenu:hover > a,
-.dropdown-submenu:focus > a {
+.dropdown-menu > li > a:focus {
text-decoration: none;
color: @dropdown-link-hover-color;
#gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
}
}
-// 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-bg, 20%);
- margin-top: 5px;
- margin-right: -10px;
-}
-.dropdown-submenu:hover > a:after {
- border-left-color: @dropdown-link-hover-color;
-}
-
-// 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