Question

I’m using Twitter Bootstrap and I want to make dropdown look like this:

and now is by default, look like this:

https://i.stack.imgur.com/naapy.png

Here is html code:

     <li class="dropdown">
          <a href="#" class="dropdown-togle" data-toggle="dropdown">
          <b>Download</b>
          <b class="caret"></b></a>
          <ul class="dropdown-menu">
          <li><a href="#">Link</a></li>
            <li><a href="#">Link2</a></li>
            </ul>
            </li>

EDITED – example: http://jsfiddle.net/gnEAe/2/

I think, I should overwrite somehing in dropdown.js or what ?

Answer 1

ok i have edited jsfiddle…

first add class test where

<div class="navbar test">

also you need to add css like this….

.test .dropdown-menu:after, .test .dropdown-menu:before {
    border:0 !important;
}

.test .dropdown-menu {
    left:-13px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-top:none !important;
}

this will give you basic idea of what i am talking…
http://jsfiddle.net/gnEAe/3/