What's the mystery of the Bootstrap dropdown menu triangle?

Question

I\'m trying to understand the difference between Twitter Bootstrap dropdown menus when they are included within a navbar and when they are not.

When they are included in

Answer 1

Just add this to the CSS and you will be able to use dropdown menu arrow without placing the dropdown inside a nav bar

.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 white;
    border-left: 6px solid transparent;
    content: '';
  }

.dropdown-menu:before, .dropdown-menu.pull-right:before {
right: 12px;
left: auto;
}

.dropdown-menu::after, .dropdown-menu.pull-right:after {
right: 13px;
left: auto;
}