JSFiddle - React, Tailwind, and code Playground

by Ketan Patel

HTML

<div class="navigationMenu">
			<label for="show-menu" class="show-menu">SHOW MENU</label>
			<input type="checkbox" id="show-menu" role="button">
			<ul id="menu">
				<li> <a href="#"> LINK 1 </a> </li>
				<li>
					<a href="#"> LINK 2 </a>
					<ul class="hidden">
						<li> <a href="#"> SUB LINK 1 </a> </li>
						<li> <a href="#"> SUB LINK 2 </a> </li>
						<li> <a href="#"> SUB LINK 3 </a> </li>
						<li> <a href="#"> SUB LINK 4 </a> </li>
						<li> <a href="#"> SUB LINK 5 </a> </li>
					</ul>
				</li>
				<li> <a href="#"> LINK 3 </a> </li>
				<li>
					<a href="#"> LINK 4 </a>
					<ul class="hidden">
						<li> <a href="#"> SUB LINK 1 </a> </li>
						<li> <a href="#"> SUB LINK 2 </a> </li>
						<li> <a href="#"> SUB LINK 3 </a> </li>
						<li> <a href="#"> SUB LINK 4 </a> </li>
						<li>
					<a href="#"> LINK 4 </a>
					<ul class="hidden">
						<li> <a href="#"> SUB LINK 1 </a> </li>
						<li> <a href="#"> SUB LINK 2 </a> </li>
						<li> <a href="#"> SUB LINK 3 </a> </li>
						<li> <a href="#"> SUB LINK 4 </a> </li>
						<li> <a href="#"> SUB LINK 5 </a> </li>
					</ul>
				</li>
					</ul>
				</li>
			</ul>
		</div>
    
    <div class="floatClear"> 
        <p> Lorem ipsum dolor sit amet, vidit adhuc quidam mea eu, his magna sapientem eloquentiam cu. Ea sit essent mollis referrentur. Fugit commodo propriae ea nec. Et eligendi officiis mel, eum singulis molestiae ad. Eum omnis viris partiendo ad.

Dolorum repudiare vis ad, vim alia meis no. His ex aliquam instructior, sit at quis liber appetere. Viris voluptatibus mei te. Eam essent possim iudicabit ei, et usu inani voluptua. Et vim saepe detracto forensibus, ex mei labore copiosae. Appareat quaerendum usu ex.

Quem tamquam praesent ut sea, per quot salutatus id. Cum invenire volutpat recteque cu, cum te tollit aperiam. Unum scripta usu an. Molestiae hendrerit qui ut, vel eu quidam fabulas percipitur, error reprehendunt signiferumque at qui. Tale docendi at per, malis clita debitis...

CSS

.navigationMenu {clear:both;width:100%;margin:0 auto;background-color:#214c21;}
.navigationMenu ul {list-style-type:none;margin:0;padding:0;position:relative;cursor:pointer;}
.navigationMenu ul li {display:inline-block;position:relative;margin-right:1px;cursor:pointer;}
.navigationMenu li a {display:block;min-width:140px;height:50px;text-align: center;line-height: 50px;color: #fff;background: #214C21;text-decoration: none;}
.navigationMenu li:hover a {background: #307030;}
.navigationMenu li:hover ul a {background: blue;color: #FFF;height: 40px;line-height: 40px;}
.navigationMenu li:hover ul a:hover {background: #307030;color: #fff;}
.navigationMenu li ul {display: none; position: absolute}
.navigationMenu li ul li {display: block;float: none; z-index: 333}
.navigationMenu li ul li a {width: auto;min-width: 100px;padding: 0 20px;border-bottom: 2px solid #CBE1B2;}
.navigationMenu ul li a:hover + .hidden, .hidden:hover {display: block;}
.show-menu {text-decoration: none;color: #fff;background: #214c21;text-align: center;padding: 20px 0;display: none;cursor:pointer;}
.navigationMenu input[type=checkbox]{display: none;-webkit-appearance: none;}
.navigationMenu input[type=checkbox]:checked ~ #menu{display: block;}


.floatClear {clear:both;}
@media (max-width: 600px) {
  .navigationMenu ul li {
    display: block;
    clear: both;
    width: 100%;
    }
}