2
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;
}
You have too much code in that question. Can you use this jsFiddle and simplify the example of the problem? -> https://jsfiddle.net/yu8t49z0/
– Sergio
When you ask, try to abstract the problem and illus it so we can understand the problem itself and not have to analyze and kick possible errors in your code, this makes it easier for us and consequently you will have a better answer and can help other users.
– deFreitas