JSFiddle - React, Tailwind, and code Playground

by Shpigford

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 0 0 -10px;
    padding:12px;
    -webkit-box-shadow:0 5px 5px rgba(0, 0, 0, 0.6);
    -moz-box-shadow:0 5px 5px rgba(0, 0, 0, 0.6);
    box-shadow:0 5px 5px rgba(0, 0, 0, 0.6);
    text-align:left;
    left:-9999px;
}

nav ul ul li {
    float:none;
    margin:0;
    padding:5px 0;
    font-size:.85em;
}

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;
}