Bootstrap dropup menu

Bootstrap dropup menu

by mediasoftpro

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="container">
    <div class="row">
        <div class="span10">
            <div class="well" style="height:250px;">
                <p>This is some content to increase the height of the page</p>
            </div>
        </div>
    </div>
</div>

<div class="navbar navbar-static" id="navbar-example">
<div class="navbar-inner">
  <div style="width: auto;" class="container">
    <a href="#" class="brand">Project Name</a>
    <ul class="nav">
      <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">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><a href="#">Separated link</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown 2 <b class="caret up"></b></a>
        <ul class="dropdown-menu dropup-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><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>
    <ul class="nav pull-right">
      <li class="dropdown" id="fat-menu">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown 3 <b class="caret up"></b></a>
        <ul class="dropdown-menu dropup-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><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>
</div>

<ul class="nav nav-pills">
<li class="active"><a...

CSS

.dropup-menu {
    bottom: 100%;
    top: auto !important;
}

/* position the arrow downwards, pointing to the menu */

.navbar .dropup-menu:before {
    border-bottom: none;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid rgba(0, 0, 0, 0.2);
    left: 7px;
    top: 100%;
}

.navbar .dropup-menu:after {
    border-bottom: none;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #fff;
    left: 10px;
    top: 100%;
    left: 6px;
}

/* point the caret up*/

.up {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid #000000;
    border-top: none;
}