JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="masthead clearfix">
<ul id="nav" class="nav ww-nav pull-right hidden-phone">
<li class="active"><a href="#">Words</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Articles</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#">Published</a></li>
<li><a href="#">Categorized</a></li>
<li><a href="#">Uncategorized</a></li>
<li><a href="#">Award Winning</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<hr>
</div>
CSS
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
/* Layout Styles */
body{
background-color:#eeeee6;
font-size:18px;
line-height: 30px;
color:#494e55;
}
hr {
margin-top:12px;
border-top:none;
border-bottom:1px solid #b2b8c1;
}
body {
padding-top: 60px;
padding-bottom: 60px;
}
.ww-nav > li
{
float:left;
margin-left:50px;
}
.ww-nav a{
padding-right: 0px;
margin-left: 0px;
margin-right: 2px;
line-height: 14px;
color:#494e55;
font-size: 25px;
font-weight:300;
text-transform: uppercase;
text-decoration: none;
}
.ww-nav{
padding-top:32px;
}
/* Bootstrap overrrides */
a {
color: #9b7188;
text-decoration: underline;
}
a:hover,
a:focus {
color: inherit;
text-decoration: underline;
}
.nav > li > a:hover,
.nav > li > a:focus{
background-color:inherit;
}
.dropdown-menu {
margin: 40px 0 0;
/*margin-left:-23px;*/ /*This only works if the parent is "Articles". Must work for other parents too.*/
background-color: #e2e3c8;
border: none;
}
.dropdown-menu > li
{
margin-top:5px;
margin-bottom:5px;
}
.dropdown-menu > li > a
{
text-transform: none;
text-align: center;
font-size: 19px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
color: black;
text-decoration: none;
background-color: #cacbab;
background-image: none;
filter: none;
}