CÓDIGO HTML PARA MENU HORIZONTAL
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<title>Aula sobre Menus em HTML</title>
<!-- Aqui chamamos o nosso arquivo css externo -->
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
<div id = "Barra_de_Menu">
<nav>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Produtos</a>
<ul>
<li><a href="#">Coznhas</a></li>
<li><a href="#">Dormitórios</a></li>
<li><a href="#">Lavabos</a></li>
<li><a href="#">Salas</a></li>
</ul>
</li>
<li><a href="#">Links</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</div><!--Fim da div barra de menu -->
<br><br>
<center>
<div style = "align:center; width: 80%; background-color:orange;">
<br>
<br>
</div>
</center>
</body>
</html>
CÓDIGO CSS
.menu
{
list-style:none;
border:1px solid #c0c0c0;
float:left;
}
.menu li
{
position:relative;
float:left;
border-right:1px solid #c0c0c0;
}
.menu li ul
{
position:absolute;
top:25px;
left:0;
background-color:#fff;
display:none;
}
*{margin: 0; padding: 0;}
body
{
font-family: arial, helvetica, sans-serif;
font-size: 18px;
}
#TextoseImagens
{
text-align:justify;
font-family: arial, helvetica, sans-serif;
font-size: 16px;
}
.menu
{
list-style:none;
border:1px solid #c0c0c0;
float:left;
background-color: #f0da52;
}
.menu li
{
position:relative;
float:left;
border-right:1px solid #f0da5e;
}
.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
{
top:25px;
left:0;
background-color:#f0da5e;
display:none;
}
.menu li:hover ul, .menu li.over ul{display:block;}
.menu li li:hover ul, .menu li.over ul{display:block;}
.menu li ul li
{
border:1px solid #c0c0c0;
display:block;
width:150px;
background-color:#f0da5e;
}
div#header
{
background-image: url(http://www.oxnar.com.br/murimoveis/imagens/panoramica01.jpg);
height:200px;
position: relative;
}
div#BarraDeMenu
{
background-color: #f0da5e;
padding: 2px;
}
div#ConteudoDoSite
{
background-color:#deffde;
width: 80%;
}
div#rodape
{
background-color: Black;
color: #ffffff;
height: 60px;
}