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

Answer 2

Just to follow up on this - if you want the arrow to position itself correctly (like when using it on a navbar element that is right-aligned, you need the following additional CSS to ensure the arrow is right-aligned:

.navbar .navbar-right > li > .dropdown-menu:before, .navbar .nav > li > .dropdown-menu.navbar-right:before {     right: 12px; left: auto; }  .navbar .navbar-right > li > .dropdown-menu:after, .navbar .nav > li > .dropdown-menu.navbar-right:after {     right: 13px; left: auto; } 

Note the "navbar-right" - that was introduced in BS3 instead of pull-right for navbars.