JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="horiz-nav">
  <ul>
    <li class="title"><a href="#">Example.com</a>
        <div class="background-holder">
             <a href="#">Example.com</a>
        </div>
    </li>
    <li><a href="#">About</a>
        <div class="background-holder">
             <a href="#">About</a>
        </div>
    </li>
    <li><a href="#">Contact</a>
         <div class="background-holder">
             <a href="#">Contact</a>
        </div>
    </li>
    <li><a href="#">Programming <span class="caret"></span></a>
      <div class="background-holder">
          <a href="#">Programming <span class="caret"></span></a>
      </div>
      <ul>
        <li>HTML</li>
        <li>PHP</li>
      </ul>
    </li>
  </ul>
</nav>

CSS

.horiz-nav {
  background: linear-gradient(#EEE, #900) no-repeat fixed;
  border: none;
  outline: none;
}
.horiz-nav ul {
  list-style: none;
}
.horiz-nav ul li,.background-holder {
    position:relative;
  display: inline-block;
  padding: 1.2em;
  clear: none;
  float: left;
  margin: 0 0;
  background: #000;
  width: 10em;
  transition: all .5s ease-in;
}
.horiz-nav ul ul {
  display: none;
  position: absolute;
  top: 73px;
  height: 0;
  transition: all .5s ease-in;
}
.horiz-nav ul ul li {
  background: linear-gradient(#000, #F50) no-repeat fixed;
  padding: 7px;
  margin: 0 3px;
  color: #FFF;
}

.horiz-nav ul li:hover > ul {
  display: block;
}
.horiz-nav ul li:hover > ul li {
  display: list-item;
  position: relative;
  float: none;
  left: -62px;
}
li .background-holder{
    position   : absolute;
    top        : 0;
    left       : 0;
    background : linear-gradient(to bottom, #808080, #80108F);
    opacity    : 0;
    transition : all 0.5;
}
li:hover .background-holder{
    opacity  : 1;
}