JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<Title> Pagina teste </Title>
<Link rel="stylesheet" Type="text/css" href="css/style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="height:1200px; width:1500px;">
<div class ="Menu_Link" >
<ul >
<li><a href="#" >Link </a></li>
<li><a href="#" >Subscrever </a></li>
<li><a href="#" >Contacto </a></li>
<li><a href="#" >English </a></li>
</ul>
</div>
<div class ="logo" ><img src="images/logo.png" width="276" height="121"></div>
<div class="Menu_Procurar">
<table style="width:300px">
<tr>
<td width="161">Corporação de Reservas</td>
<td width="127">Corporación de Derecho</td>
</tr>
<tr>
<td>Estrategicas de</td>
<td>Público tutelada por el</td>
</tr>
</tr>
<tr>
<td>Produtos Petroliferos</td>
<td>Ministerio de Industria,</td>
</tr>
<tr>
<td></td>
</tr>
</table>
<input type="name" name="procurar">Procurar
</div>
<nav>
<ul class="menu">
<li><a href="#">Home</a>
<ul>
<li><a href="#">Quem Somos?</a></li>
<li><a href="#">Missão e Valores</a></li>
<li><a href="#">Actividades</a></li>
</ul>
</li>
<li><a href="#">Seguridad Suministro</a>
<ul>
<li><a href="#">Produtos petroliferos</a></li>
<li><a href="#">GPL</a></li>
<li><a href="#">Gás Natural</a></li>
<li><a href="#">Internacional</a></li>
</ul>
</li>
<li><a href="#">Finanzas</a>
<ul>
<li><a href="#">Financiacion</a></li>
<li><a href="#">Informações...
CSS
* {
margin: 0;
padding: 0;
}
.Menu_Link {
height:300px;
width: 650px;
float: left;
position: relative;
left: 930px;
}
.Menu_Link ul{
list-style: none;
}
.Menu_Link li a{
float: left;
text-decoration: none ;
font-weight: bold;
font-size: 13px;
padding: 10px;
color:#000;
}
.logo {
position: relative;
top: 30px;
left: -500px;
Width: 1100px;
}
.Menu_Procurar {
position: relative;
top: -80px;
left: 280px;
width: 0;
font-size: 10px;
}
.menu{
list-style:none;
border:1px solid #c0c0c0;
float:left;
position:relative;
top:-50px;
left:-500px;
}
.menu li{
position:relative;
float:left;
border-right:1px solid #c0c0c0;
}
.menu li a{color:#333; text-decoration:none; padding:5px 10px; display:block;}
.menu li a:hover{
background:#333;
color:#fff;
-moz-box-shadow:0 3px 10px 0 #CCC;
-webkit-box-shadow:0 3px 10px 0 #ccc;
text-shadow:0px 0px 5px #fff;
}
.menu li ul{
position:absolute;
top:25px;
left:0;
background-color:#fff;
display:none;
}
.menu li:hover ul, .menu li.over ul{display:block;}
.menu li ul li{
border:1px solid #c0c0c0;
display:block;
width:150px;
}
.menu1{
list-style: none;
border: 1px solid #c0c0c0;
float: left;
position: relative;
top: -82px;
left: 180px;
width: 400px;
}
.menu1 li{
position:relative;
float:left;
border-right:1px solid #c0c0c0;
}
.menu1 li a{color:#333; text-decoration:none; padding:5px 10px; display:block;}
.menu1 li a:hover{
background:#333;
color:#fff;
-moz-box-shadow:0 3px 10px 0 #CCC;
-webkit-box-shadow:0 3px 10px 0 #ccc;
text-shadow:0px 0px 5px #fff;
}
.menu1 li ul{
position:absolute;
top:25px;
left:0;
background-color:#fff;
display:none;
}
.menu1 li:hover ul, .menu li.over ul{display:block;}
.menu1 li ul li{
border:1px solid #c0c0c0;
display:block;
width:150px;
}
.Galeria {
position:absolute;
top:200px;
left:150px;
z-index: -1;
}
.Link {
position:absolute;
top:570px;
left:150px;
}
.Link2 {
position:absolute;
top:570px;
left:315px;
}
.Link3...