JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="navbar ">
<div class="container">
<ul class="nav pull-right">
<li><a href="index.html"><b>Home</b></a></li>
<li class="divider-vertical"></li>
<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="downloading_link">link </a></li>
<li><a href="downloading_link.html">link</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
<li><a href="faq.html"><b>F.A.Q.</b></a></li>
<li class="divider-vertical"></li>
</li>
</ul>
</div>
<!-- Main hero unit for a primary marketing message or call to action -->
</div>
</div>
CSS
.container {
border-bottom: 1px solid #FFF;
}
ul.nav li.dropdown:hover ul.dropdown-menu {
display:block;
margin: 0px 0px 0px 10px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-top: none;
border-top-left-radius:0px;
}
.navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
border:none;
}
.navbar .nav > li > a {
margin: 0px 10px;
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
color: #000;
text-shadow:none;
}
.navbar .nav > li > a:hover, .navbar .nav > li > a:active{
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
color: #000;
text-shadow:none;
}
a.menu:after, .dropdown-toggle:after {
content: none;
}