adding the arrow to dropdown pills for twitter bootstrap?

Question

I got the twitter bootstrap dropdown buttons successfully working, but I have a tiny problem. The black navbar here:

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

Answer 1

Assuming you're referring to the white arrow that points upward when a menu item is clicked, the style you're looking for is on line 3907 in bootstrap.css:

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

You can try copying this style and removing the .navbar portion of the style declaration and modify it to fit your code.

Answer 2

Here's a refinement to Jason Towne's answer.

This works correctly if the menu has been pulled to the right.

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

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

.btn-group.pull-right > .dropdown-menu-arrow::before {
    left: inherit;
    right: 9px;
}

.btn-group.pull-right > .dropdown-menu-arrow::after {
    left: inherit;
    right: 10px;
}

Here's an example of usage.

<div class="btn-group pull-right">
    <a href="#" data-toggle="dropdown" class="btn dropdown-toggle">
    Actions
    <span class="caret"></span>
    </a>
    <ul class="dropdown-menu dropdown-menu-arrow">
        <li>...</li>
    </ul>
</div>

Answer 3

This is work for me

---

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

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

    // html

//for left side dropdown menu

    <div class="dropdown arrow-left">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
    </ul>
    </div>


//for right side dropdown menu

    <div class="dropdown pull-right arrow-right">
    <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Dropdown
    <b class="caret"></b>
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
    </ul>
    </div>

Answer 4

Not sure what the pills are, but if you have bootstrap you add the arrows by simply putting this anywhere in your code.

<b class="caret"></b>

Is that what you meant?