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 into a navbar, a little up triangle/arrow is showed upon the expanded menu. This triangle is not showed when no navbar is used :

http://twitter.github.com/bootstrap/javascript.html#dropdowns

I just spent two hours exploring the css/html, I still don't understand WHY...

Any idea ?

Answer 1

There are two styles applied to the dropdown menu when inside the nav element. They are as follows:

.navbar .nav > li > .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: '';
 }
 .navbar .nav > li > .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: '';
  }

They create two triangles on top of each other one light grey, the other dark grey. If you use chrome developer tools you can inspect these elements and turn off different styles to get a feel for what they are doing. These styles are not applied without the navbar

Answer 2

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;
}