css - bootstrap 3 arrow on dropdown menu

Question

In bootstrap 2 the dropdown menu had an upwards arrow as it can be seen here (i am not talking about the carret). Now using bootstrap 3 or latest git this arrow doesn't exist in my simple example bellow nor in the examples on the bootstrap homepage.

How can I add this arrow again using bootstrap 3?

  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      Menu
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">a</a></li>
      <li><a href="#">b</a></li>
      <li><a href="#">c</a></li>
    </ul>
  </li>

PS:To be precise the picture can be seen in another stackoverflow article.

Answer 1

You need to add :after and :before css rules to your dropdown-menu. These rules are taken from Bootstrap 2, and are what draw the triangle above the dropdown.

JSFiddle DEMO

.dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: '';
}

Confused how? See here for an animation that explains css triangles