display: block;
}
+.dropup .dropdown-submenu > .dropdown-menu {
+ top: auto;
+ bottom: 0;
+ margin-top: 0;
+ margin-bottom: -2px;
+ -webkit-border-radius: 5px 5px 5px 0;
+ -moz-border-radius: 5px 5px 5px 0;
+ border-radius: 5px 5px 5px 0;
+}
+
.dropdown-submenu > a:after {
display: block;
float: right;
</ul>
</li>
</ul>
+ <div class="dropup" style="float: left; margin-left: 20px;">
+ <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
+ <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>
<pre class="prettyprint linenums">
</ul>
</li>
</ul>
+ <div class="dropup" style="float: left; margin-left: 20px;">
+ <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
+ <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
+ <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 class="dropdown-submenu">
+ <a tabindex="-1" href="#">{{_i}}More options{{/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>
</div>{{! /example }}
<pre class="prettyprint linenums">
.dropdown-submenu {
position: relative;
}
+
+// Default dropdowns
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
display: block;
}
+// Dropups
+.dropup .dropdown-submenu > .dropdown-menu {
+ top: auto;
+ bottom: 0;
+ margin-top: 0;
+ margin-bottom: -2px;
+ -webkit-border-radius: 5px 5px 5px 0;
+ -moz-border-radius: 5px 5px 5px 0;
+ border-radius: 5px 5px 5px 0;
+}
+
+// Caret to indicate there is a submenu
.dropdown-submenu > a:after {
display: block;
content: " ";