Dropdown menu moving divs below [closed]

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"/>&nbsp; &nbsp; &nbsp; &nbsp; <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;
    }
    
asked by anonymous 08.03.2015 / 23:33

1 answer

0

In order for the dropdown not to change the rest of the structure, add:

ul li:hover ul li{
    display:block;
    position:absolute;
}

You really have a lot of code in your question, and the amount of uls and lis confuses a bit so you should give a refactor to that code, but immediately for your question, just insert the

position:absolute

in the right place.

    
22.05.2015 / 22:18