JSFiddle - React, Tailwind, and code Playground
by Andrew Lyndem
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top" id="custom-nav" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">eService</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Services
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Stage Design & Build</a></li>
<li><a href="#">Event Planning & Management</a></li>
<li><a href="#">Video Production</a></li>
<li><a href="#">Audio Production</a></li>
<li><a href="#">Lighting Production</a></li>
</ul>
</li><!-- dropdown -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Events
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Corporate Events</a></li>
<li><a href="#">Civic Events</a></li>
<li><a href="#">Charity Events</a></li>
<li><a href="#">Grand Openings</a></li>
<li><a href="#">Concerts</a></li>
...
CSS
#custom-nav {
-webkit-box-shadow: 20px 20px 20px #FC0;
-moz-box-shadow: 20px 20px 20px #FC0;
box-shadow: 20px 20px 20px #FC0;
z-index:999;
}