JSFiddle - React, Tailwind, and code Playground

HTML

<nav> <!--Menu Principal-->
   <ul class="menu"> 
       <li><a href="index.php">Início</a></li>	
       <li><a href="aempresa.php">A Empresa</a></li>
	     <li><a href="ambientes.php">Serviços</a>
	         <ul class="subMenu">
		          <li><a href="#">Sala</a></li>
		          <li><a href="#">Quarto</a></li>
			     </ul>
	     </li>
       <li> <a href="contato.php">Contato</a></li>
       <li> <a href="avalicoes.php">Avaliações</a></li>
   </ul>  
</nav>

<section id="conteudo">
   
  <p>
   conteúdo do site
  </p>
</section>

CSS

nav{ 
 width: 100%;
 height: 40px;
 background: green; 
}

nav ul.menu{
  width: 420px;
  margin: 0 auto;
}

nav a{
  text-decoration: none;
  color: #FFF;
  font-weight: bold;
}



nav ul.menu li{
  width: 80px;
  display: inline-block;
  position: relative;
  line-height: 40px;
  background: rgba(255,255,0,0.5);
  /*margin-left: 10px;*/
  text-align: center;
}

nav ul.menu li ul.subMenu{
  position: absolute;
  top: 40px;
  background: green;
  visibility: hidden;
}

nav ul.menu li ul.subMenu li{
   background: green;
   background: rgba(255,255,0,0.5);
}

nav ul.menu li:hover{
  background: rgba(255,255,255,0.5);
}

nav ul.menu li ul.subMenu li:hover{
   background: rgba(255,255,255,0.5);
}

nav ul.menu li:hover ul.subMenu {
  visibility: visible;
}

#conteudo{
  width: 100%;
  height: 400px;
  background: rgba(0,0,0,0.7);
  color: #FFF;
}

#conteudo p{
  text-align: center;
}