JSFiddle - React, Tailwind, and code Playground

HTML

<!--
Drop Down 1
On Hover
-->
<h1>DROPDOWN ON HOVER</h1>
<nav class='navmenu'>
  <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu1</a></li>
  <li class='submenu'><a href="#NOLINK">Dropdown</a>
  <ul class='dropdown'>
  <li><a href="#">Dropdown 1</a></li>
  <li><a href="#">Dropdown 2</a></li>
  <li><a href="#">Dropdown 3</a></li>
  </ul>
  </li>
  <li><a href="#">Menu3</a></li>
  </ul>
</nav>


<!--
Drop Down 2
On Click
-->
<br><br><br>
<h1>DROPDOWN ON CLICK</h1>
<nav class='navmenu'>
<label class="navmobile" for="openav">Open Menu</label>
<input id="openav" role="button" type="checkbox">
  <ul class='mobile'>
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu1</a></li>
  <li class='submenu1'><label class="openmenu" for="openmenu">Dropdown</label>
  <input id="openmenu" role="button" type="checkbox">
  <ul class='dropdown1'>
  <li><a href='#'>Dropdown1</a></li>
  <li><a href='#'>Dropdown2</a></li>
  <li><a href='#'>Dropdown3</a></li>
  </ul>
  </li>
  <li><a href="#">Menu3</a></li>
  </ul>
</nav>

CSS

body{
  font-family: 'Open Sans', sans-serif;
}

/*Basic 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
}


/*
CSS Dropdown
On Hover
*/

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
}


/*
CSS Dropdown
On Click
*/

nav.navmenu li.submenu1 .openmenu {
  cursor: pointer;
  color: #FFF;
  padding: 10px 15px;
}

nav.navmenu li.submenu1 ul.dropdown1 {
  display: none;
  padding: 0px;
  position: absolute;
  top: 1.6em;
  width: 200px;
}

nav.navmenu input[type="checkbox"] {
  display: none
}

nav.navmenu li.submenu1 #openmenu:checked ~ ul.dropdown1 {
  display: block;
  z-index:9
}

nav.navmenu li.submenu1 ul.dropdown1 li {
  display: block;
}

/*CSS RESPONSIVE*/
@media screen and (min-width:500px){
  nav.navmenu label.navmobile{
    display:none
  }
}
@media screen and (max-width:500px){
nav.navmenu ul.mobile{
  display:none;
  width:100%
}
nav.navmenu #openav:checked ~ ul{
  display: block;
}
nav.navmenu li,nav.navmenu li.submenu1 .openmenu {
    display:block;
    margin: 0px;
}
/*ON HOVER*/
nav.navmenu li.submenu:hover ul.dropdown {
    display: block;
    z-index: 9;
    position: relative;
    margin: 0px;
}

/*ON CLICK*/
label.navmobile {
    padding: 10px 15px;
    display: block;
    color: white;
    cursor: pointer;
}
nav.navmenu li.submenu1 #openmenu:checked ~...