current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

The dropdown menu in Twitter Bootstrap's nav component has a "tip" at the top of the dropdown menu.

enter image description here

How can you add a tip to a normal dropdown menu?

enter image description here

<div class="dropdown">
    <a href="#" data-toggle="dropdown">
        Click me
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li><a tabindex="-1" href="#">Action</a></li>
    </ul>
</div>
share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

Add this CSS:

.dropdown-menu:before {
  position: absolute;
  top: -5px;
  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: -3px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: '';
}

I got it from the nav dropdown styles and changed a couple of values. It should be easy to tune for your needs.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.