JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>Menu Responsivo</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
		<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
		<script src="https://code.jquery.com/jquery-3.0.0.js"></script>	
	</head>
	<body>
		<header>
			<input type="checkbox" id="btn-menu">
			<label for="btn-menu"> <i class="fa fa-bars" aria-hidden="true"></i> </label>
			<nav class="menu">
				<ul>
					<li><a href="#">Home</i></a></li>
					<li class="submenu"><a href="#">Produtos <i class="fa fa-caret-down" aria-hidden="true"></i></a>
						<ul>
							<li><a href="#">Hospedagem de Sites</i></a></li>
							<li><a href="#">Hospedagem Wordpress</i></a></li>
							<li><a href="#">Registro de Domínio</i></a></li>
							<li><a href="#">Servidor Dedicado</i></a></li>	
							<li><a href="#">E-mail Exchange</i></a></li>
						</ul>
					</li>
					<li class="submenu"><a href="#">Sobre <i class="fa fa-caret-down" aria-hidden="true"></i></a>
						<ul>
							<li><a href="#">Sobre nós</i></a></li>
							<li><a href="#">Parceiros</i></a></li>
							<li><a href="#">Blog</i></a></li>
						</ul>
					</li>
					<li><a href="#">FAQS</a></li>
				</ul>
			</nav>
		</header>
		<!-- JQUERY -->
		<script>
			$(".submenu").click(function(){
				$(this).children("ul").slideToggle();
			})
			$("ul").click(function(p){
				p.stopPropagation();
			})
		</script>
	</body>
</html>

CSS

/* RESET */

* {margin: 0; padding: 0; font-size: 100%; font-family: 'Open Sans', sans-serif; font-weight: normal; box-sizing: border-box; border: none; 
outline: none;}

body {background-color: #fff;}
img {max-width: 100%;}
ul {list-style: none;}
a {text-decoration: none;}


/* MENU */


header {height: 50px; background-color: #CE852A;}
header label {font-size: 2.2em; color: #fff; cursor: pointer; display: none;} #btn-menu {display: none;}
.menu ul {background-color: #CE852A; display: flex;}
.menu ul ul {display: none;}
.menu li {margin-left: 50px;}
.menu a {display: block; padding: 15px 20px; color: #fff; font-size: 1.1em;}
.menu a:hover {background: rgba(0,0,0,0.3);}
.menu i {margin-left: 3px;}

.menu ul ul li {margin-left: 0px;}
.menu ul ul li a {padding: 15px 12px; font-size: 1.1em;}
.menu ul li:hover ul {display: block; position: absolute;} 


@media screen and (max-width: 768px) {
	header label {display: block; padding: 1px 8px; width: 0%;}
	.menu {position: absolute; width: 100%; transform: translateX(-100%); transition: all 0.5s;}
	.menu ul ul {width: 80%;}
	.menu ul {display: block; background: #555;}
	.menu ul li:hover ul {position: static; display: none;} 
	.menu i {position: absolute; right: 2%;}
	.menu ul li {margin-left: 0px;}
	#btn-menu:checked ~ .menu {transform: translateX(0%);}
	.menu ul ul {background: rgba(0,0,0,0.4); width: 100%;}

}