JSFiddle - React, Tailwind, and code Playground

by newsong80

HTML

<ul class="livability-menu">
  <li class="livability">County Overview
    <div class="more">more >></div>
  </li>
  <ul class="dropDown">
    <li><a class="livability-a" href="education.html">Education</a></li>
    <li><a class="livability-a" href="healthcare.html">Healthcare</a></li>
    <li><a class="livability-a" href="housing.html">Housing</a></li>
  </ul>
</ul>

CSS

ul.livability-menu {
  display: block;
  height: 50px;
  padding: 8;
  width: 100%;
  line-height: 2.5em;
  box-sizing: border-box;
  background-color: #0066CC;
}

.more {
  float: right;
  text-align: right;
  color: #ffffff;
}

ul.dropDown {
  width: 100%;
  box-sizing: border-box;
  list-style-type: none;
  position: relative;
  padding: 17px;
  font-size: 1.3em;
  visibility: hidden;
  top: 0px;
  z-index: 1;
  background-color: #0066CC;
  -webkit-transition: all .25s;
  -moz-transition: all .25s;
  -ms-transition: all .25s;
  -o-transition: all .25s;
  transition: all .25s;
}

ul.livability-menu:hover .dropDown {
  list-style-type: none;
  visibility: visible;
  width: 100%;
  box-sizing: border-box;
  line-height: 3em;
  z-index: 1;
  background-color: #0066CC;
}

li.livability {
  font-size: 1.6em;
  color: #ffffff;
  list-style-type: none;
  background-color: #0066CC;
}

a.livability-a {
  text-decoration: none;
  color: #fff;
}

a.livability-a:hover {
  color: #EBF907;
}

a.livability-a:visited {
  text-decoration: none;
  color: #96D2F8;
}