JSFiddle - React, Tailwind, and code Playground

by Yuli Satriani

HTML

<nav class='navmenu'>
  <ul>
  <li><a href="#"><b><i class="fa fa-home" aria-hidden="true"></i>&nbsp; Home</b></a></li>
  <li><a href="#"><b><i class="fa fa-sitemap" aria-hidden="true"></i>&nbsp;Networking</b></a></li>
  <li><a href="#"><b><i class="fa fa-windows" aria-hidden="true"></i>&nbsp;Windows</b></a></li>
  <li class='submenu'><a href="#"><i class="fa fa-plus-square" aria-hidden="true"></i>&nbsp;<b>Menu Dropdown</b></a>
    <ul class='dropdown'>
        <li><a href="#"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i>&nbsp;<b> Dropdown 1</b></a></li>
        <li><a href="#"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i>&nbsp;<b>Dropdown 2</b></a></li>
        <li><a href="#"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i>&nbsp;<b>Dropdown 3</b></a></li>
    </ul>
</li>
  <li><a href="#"><b><i class="fa fa-android" aria-hidden="true"></i>&nbsp;Android</b></a></li>
  <li><a href="#"><b><i class="fa fa-linux" aria-hidden="true"></i>&nbsp;Linux</b></a></li>
  </ul>
</nav>

CSS

.navmenu {
  width: 100%;
  margin: 0px auto;
  display: block;
  position: relative;
  background-color: #1C90F3;
}

nav.navmenu ul {
  list-style: none;
  position: relative;
  width: 80%;
  box-sizing: border-box;
  background: #1C90F3;
  margin: 0px auto;
  padding: 0px;
}

nav.navmenu li {
  display: inline-block;
  position: relative
}

nav.navmenu li a {
  padding: 10px 15px;
  text-decoration: none;
  color: #FFF;
  display: block;
  box-sizing: border-box;
}

nav.navmenu li a:hover {
  background-color: #1789EA
}
nav.navmenu li.submenu ul.dropdown {
  display: none;
  padding: 0px;
  position: absolute;
}

nav.navmenu li.submenu:hover ul.dropdown {
  display: block;
  z-index:9
}

nav.navmenu li.submenu ul.dropdown li {
  display: block;
  width: 200px;
  background: #1C90F3
}