My dropdown menu is moving all the divs below it.
Here is the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link rel="stylesheet" type="text/css" href="estilo_home.css"/>
</head>
<body>
<div id="mae">
<div id="topo">
<div id="titulo"><a href="home.html">Asa de Livro</a></div>
</div>
<div id="menu">
<div id="menuh">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="missao.html">Missão</a></li>
<li><a href="categorias.html">Categorias</a></li>
<li><a href="#">Notícias</a>
<ul>
<li><a href="brasil.html">Brasil</a></li>
<li><a href="mundo.html">Mundo</a></li>
</ul>
</li>
<li><a href="cadastro.html">Cadastre-se</a></li>
<li><a href="contato.html">Contato</a></li>
<li><a href="lojas.html">Lojas</a>
<ul>
<li><a href="#">SP</a>
<ul>
<li><a href="#">São Paulo</a></li>
<li><a href="#">Guarulhos</a></li>
<li><a href="#">Tatuí</a></li>
</ul>
</li>
<li><a href="#">MG</a>
<ul>
<li><a href="#">BH</a></li>
<li><a href="#">Ouro Preto</a></li>
<li><a href="#">Nova Lima</a></li>
</ul>
</li>
<li><a href="#">RJ</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="promocoes1">
<div id="george" class="prom" align="center">
<img src="Imagens/1984.jpg" width="90px" height="130px" />
<p> Oferta Limitada! Apenas R$30,00<br/> 1984 - George Orwell</p>
</div>
<div id="farsa" class="prom" align="center">
<img src="Imagens/a farsa.png" width="90px" height="130px" />
<p> Oferta Limitada! Apenas R$20,00<br/> A Farsa - Christopher Reich</p>
</div>
</div>
<div id="conteudo">
<div id="lancamentos" class="lanc">
<h2>Lançamentos</h2>
<p>Box Trilogia Sprawl - R$109,90</p> <img src="Imagens/box_trilogia_sprawl.jpg" width="100px" height="140px"/>
<p>Inferno - Dan Brown - R$70,00</p> <img src="Imagens/inferno.jpg" width="100px" height="140px"/>
</div>
<div id="noticia_rap">
<h2> <img src="Imagens/zh.png" width="53px" height="33px"/> Site convida autores consagrados a indicar escritores em início de carreira</h2>
<p>Diante de estantes abarrotadas pela sempre crescente oferta de títulos, quem visita uma livraria pode sair sem saber quais são as novas obras relevantes para a literatura brasileira. Para orientar o público, escritores já consagrados podem ser boas referências, apadrinhando um ou outro novato e os apresentando a seus pares e leitores. <a href="#">Leia mais.</a></p>
<h2> <img src="Imagens/logo_veja.gif" width="72px" height="30px" /> "Clube da leitura" de Mark Zuckerberg faz vendas de livro dispararem</h2>
<p> Mark Zuckerberg, cofundador e CEO do Facebook, traçou um plano para 2015: ler um livro a cada quinze dias e comentá-lo na rede social. Na verdade, a ideia é mais elaborada: Zuckerberg escolhe uma obra, informa o título aos participantes do clube do livro, página que ele criou (chamada A Year of Books), e duas semanas depois realiza um debate público com o autor da obra. Nesta terça-feira, ocorreu o primeiro encontro virtual, com o escritor venezuelano Moisés Naím, autor de O Fim do Poder </p>
<img src="Imagens/Mark.jpg" width="100px" height="100"/> <img src="Imagens/fim do poder.jpg" />
</div>
</div>
<div id="promocoes2">
<div id="rosa" class="prom" align="center">
<img src="Imagens/a rosa do povo.png" width="90px" height="130px" />
<p> Oferta Limitada! Apenas R$40,00<br/> A Rosa e o Povo - Carlos Drummond de Andrade</p>
</div>
<div id="alasca" class="prom" align="center">
<img src="Imagens/alasca.png" width="90px" height="130px" />
<p> Oferta Limitada! Apenas R$47,00<br/> Quem é você Alasca? - John Green</p>
</div>
</div>
<div id="rodape"><p>Matriz: Rua das Flores, nº20 - Funcionários - Belo Horizonte - Minas Gerais | Tel: (31)3854-7952; (31)9851-7412</p> </div>
</div>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
body{font-size:62.5%;}
div{border: #000 solid 1px;}
#mae{
width:95%;
min-height:80em;
margin:auto;
padding:0.3em;
background-color:#FC6;
}
#topo{
width:98%;
height:15em;
margin-left:0.9%;
background:url(Imagens/livros4.jpg);
border:none;
}
#titulo{
width:45%;
min-height:5em;
border:none;
margin-left: 35em;
}
#titulo a{
text-decoration:none;
font:Verdana, Geneva, sans-serif;
font-size:9em;
color:#000;
font-weight:bold;
}
#menu{
width:98%;
height:4em;
margin-left:0.9%;
margin-top:0.1%;
}
#menuh{
width: 70%;
height: 3em;
margin-left: 20em;
margin-top:0.7em;
}
#promocoes1{
width:15%;
height:50em;
margin-left:0.9%;
margin-top:0.2%;
float:left;
}
#conteudo{
width:66.5%;
height:50em;
margin-left:0.3%;
margin-top:0.2%;
float:left;
}
#promocoes2{
width:15%;
height:50em;
margin-left:0.3%;
margin-top:0.2%;
float:left;
margin-bottom:0.2%;
}
#rodape{
width:98%;
height:7em;
margin-left:0.9%;
clear:both;
}
#menuh ul {
list-style:none;
margin:0;
padding:0;
display:inline;
}
#menuh ul li{
float:left;
}
ul li a{
display:block;
background-color:#FC6;
color:#663300;
text-decoration:none;
font-size:1.5em;
width:8em;
height:1.5em;
text-align:center;
margin-bottom:1px;
margin-left:0.1em;
border: #663300 1px solid;
}
ul li a:hover{
color:#600;
font-weight:bold;
}
ul li ul li a:hover{
background-color:#F60;
display:block;}
ul li ul li ul li a{
width:6em;
}
ul li ul li{display:none;
clear:both;
position:absolute;}
ul li:hover ul li{
display:block;
}
ul li ul li{
position:relative;
}
ul li ul li ul{
display:none;
margin-top:0.1em;
position:absolute;
left:12.3em;
top:-0.6px;
}
ul li ul li:hover ul{
display:block;
}
#rodape p {
font:Verdana, Geneva, sans-serif;
font-size:1.5em;
color: #663300;
margin-left:24em;
margin-top:2em;
}
div.prom{
width:70%;
min-height:16em;
margin:auto;
margin-top:5em;
border:none;
}
div.lanc{
width:15%;
min-height:14em;
margin-left: 1.5em;
margin-top:1.5em;
border:none;
font:Verdana, Geneva, sans-serif;
font-size:1.3em;
color: #663300;
float:left;
}
#noticia_rap{
width:80%;
min-height:3em;
margin-left: 1.5em;
margin-top:1.5em;
border:none;
font:Verdana, Geneva, sans-serif;
font-size:1.3em;
color: #663300;
float:left;
}