Dropdown menu moving Ivs below

Asked

Viewed 647 times

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;
    }
html css
  • 4

    You have too much code in that question. Can you use this jsFiddle and simplify the example of the problem? -> https://jsfiddle.net/yu8t49z0/

  • 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.

1 answer

0

So the dropdown doesn’t change the rest of the structure, add:

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

There really is a lot of code in your question, and the amount of uls and lis confuses a little so you should give a refactored in this code, but right away to your question is just enter the 

position:absolute

in the right place.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.