JSFiddle - React, Tailwind, and code Playground

by marczking

HTML

<nav role='navigation'>
  <ul class="top-level">
    <li><a href="#">Home</a></li>
    <li><a href="#">State</a>
      <ul>
        <li><a href="#">California</a></li>
        <li><a href="#">Nevada</a></li>
        <li><a href="#">New Mexico</a></li>
        <li><a href="#">Arizona</a></li>
      </ul>
    </li>
    
    <li><a href="#">Clients</a>
      <ul>
        <li><a href="#">MGM Mirage</a></li>
        <li><a href="#">Caesars Entertainment</a></li>
        <li><a href="#">Boyd Gaming</a></li>
        <li><a href="#">Stations Casinos</a></li>
      </ul>
      
    </li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

CSS

body {
  background:black;
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

li {
  padding:none; /* quick reset */
  list-style:none; /* bullet removel */
  width:200px;
  position:relative;
  background:blue;
  transition:background-color 0.5s ease;
}

li:hover {
  background:darkblue;
}

a {
  display:block; /* make full size */
  text-decoration:none; /* no underline */
  padding:15px 0;
}

li a {
  color:white;
}

nav {
  max-width: 1024px; /* whatever */
  margin:10px auto; /* let's center this puppy */
}


/* Top level */ 
.top-level {
  text-align:center; /* center my list items */
}

.top-level > li { /* only my top level list items */
  display:inline-block;
  position:relative; /* set positioning context */
}

/* If list item has submenu -  show indicator*/

.top-level ul::before {
  content:"";
  position:absolute;
  top: -30px;
  bottom:20%;
  right:10%;
  width:0;
  height:0;
  /* make triangle */  
  border-top:10px solid lightsteelblue;
  border-right:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:10px solid transparent;
  transition:border-color 5s 1s ease;
}

/* fade the indcator on hover */

.top-level ul:hover::before { 
  border-top:10px solid transparent;
}

/* If list item has submenu -  hide it */

.top-level ul {
  position:absolute;
  top:100%;
  left:0;
  transition: 
    visibility 0s linear,
    opacity 1s linear;
}

.top-level ul li {
  visibility:hidden;
  opacity:0;
  padding-left:1em;
  text-align:left;
}

/* If list item has submenu -  show it on hover */

.top-level > li:hover ul li {
  visibility:visible;
  opacity:1;
}

.top-level ul li{
  border-bottom:1px solid steelblue;
}

.top-level ul li:first-child {
  border-top:1px solid steelblue;
}

.top-level ul li:last-child {
  border-bottom:none;
}