JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="pt-br">
	<head>
		<!DOCTYPE HTML>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
    <title>Teste</title>
         <link rel="stylesheet" type="text/css"  href="estilo.css" /> 
</head>
<body>
	<div>
		<img src="TCM_logo.jpg" width="20%" height="20%">
		<a href=""<img src="images.png" width="2%" =height="2%" align="right"></a>
	</div>
		<br>
		
<nav id="menu">
  <ul>
        <li>
        	<a>Historia</a>
        </li>

        <li>
        	<a>Localização</a>
        </li>

            <li>
            	<a href="produtos.html">Produtos</a>
                <ul>
					<li>
						<a href="#">Dietas</a>
					</li>
					<li>
						<a href="#"></a>Fórmulas
					</li>
					<li>
						<a href="#"></a>Suplementos
					</li>
					<li><a href="#"></a>Equipos
					</li>
					<li>
						<a href="#"></a>Frascos
					</li>
					<li>
						<a href="#"></a>Fraldas
					<li/>
				</ul>
            </li>

        	<li>
        		<a>Trabalhe Conosco</a>
        	</li>
        	
        	<li>
        		<a href="contato.html">Contato</a>
        	</li>                
</ul>
</nav>
<br>

<div>
	<img src="telao.png" width = "1049" height="300">
</div>
<div>
	<a href="produtos.html">aadkjsadj</a>
</div>
</body>
</html>

CSS

body{
font-family: arial, helvetica, sans-serif;
font-size: 12px;
}
 
ul{
	color:#008000;
	float:left;
	display:inline-block;
	font-size: 18px;
	
}

li{
	float:left;
}

li ul{
	position: absolute;
	display: none;

}

li:hover ul, li.over ul{
	display:block;
	
}

ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
}