JSFiddle - React, Tailwind, and code Playground
HTML
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Photos</a></li>
<li class="sub">
<a href="#">Services (Drop Down)</a>
<ul>
<li><a href="#">Sub Link One</a></li>
<li><a href="#">Sub Link Two Here</a></li>
<li><a href="#">Sub Link Three</a></li>
<li><a href="#">Sub Link Four Here</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
CSS
nav {
text-align:left;
}
nav ul {
margin:0;
padding:0;
z-index:100;
}
nav ul ul {
background:#fff;
list-style:none;
position:absolute;
margin: 0;
text-align:left;
left: -999px;
}
nav ul ul:before{
content:"";
position: absolute;
z-index: 0;
left: -4px; right: -4px;
top: 2px;
bottom: -6px;
border-radius: 0px;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.11) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
background: linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
box-shadow: inset 0 0 3px 2px rgba(255,255,255,0.9);
}
nav ul ul li {
position: relative;
z-index: 1;
float:none;
display: list-item;
margin:0;
padding:5px 5px;
font-size:.85em;
background-color: white;
}
nav ul ul a {
padding:5px 0;
margin-bottom:1px;
white-space:nowrap;
}
nav li {
-moz-box-orient:vertical;
vertical-align:auto;
position:relative;
display:inline;
}
nav li:hover ul {
left:0;
}