JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="custom-nav">
    <ul class="nav row-fluid">
        <li class="span3"><a href="#">Home</a>

        </li>
        <li class="span3"><a href="#">About Us</a>

        </li>
        <li class="span3"><a href="#">Our Stuff</a>

        </li>
        <li class="span3"><a href="#">Contact Us</a>

        </li>
    </ul>
</div>
<!-- This is not part of the solution, just a helper to see what the frame width is < 768=P hone 768 - 979=T ablet 980+=D esktop -->
<div><span id="currentWidth" />
</div>

CSS

.custom-nav .nav li a {
    background-color: #aaa;
    text-align: center;
    color : white;
    padding: 6px 0;
}
.custom-nav .nav li a:hover,
.custom-nav .nav li a:hover{
    background-color: #ccc;
}