Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Rafael Bastiansch

Menu Drop Down empurrando Divs abaixo

Por , em Desenvolvimento frontend

Recommended Posts

Rafael Bastiansch    0

Rafael Bastiansch
Postado

Olá pessoal, estou com um problema com meu menu Drop Down na horizontal.

Quando passo o mouse em cima dele, as opções de hover que desce, empurra as div's que estão abaixo para baixo(estava empurrando para o lado, mas usei o clear: both e melhorou um pouco) , queria um solução de que o menu hover passasse por cima das div's abaixo. Já usei position absolute, relative e não deu certo.

Se alguém puder me ajudar, agradeço.

Código Html

<body>
	<div id="nav">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Tutoriais</a>
					<ul>
						<li><a href="#">programas</a></li>	
						<li><a href="#">NET</a></li>
						<li><a href="#">Videos</a></li>
						<li><a href="#">Acesso</a></li>
					</ul>					
				</li>
				<li><a href="#">WEB</a>
					<ul>
						<li><a href="#">Login</a></li>
						<li><a href="#">Sair</a></li>
					</ul>
				</li>
				<li><a href="#">Programacao</a></li>
				<li><a href="#">Fale conosco</a></li>
			</ul>			
		</div>		
	   <div id="limpa"></div>
	   <div id="propaganda" class="sombra-borda"></div>		
	   <div id="conteudo" class="sombra-borda"></div>
	   <div id="limpa"></div>
	   <div id="rodape"></div>
	</div>	
</body>

Código CSS Menu:

#nav {
float: auto;
text-align: center;
width: 100%;
margin:10px;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#nav ul li{
float: left;
position: relative;
display: block;
width: 150px ;
}
#nav ul li a{
color: #FAFAFA;
background: #E3351F;
text-decoration: none;
margin: 0 1px;
padding: 5px 10px;
border-top: 2px solid #fff;
display: block;
}
#nav li ul {
display: none;
}
#nav ul li a:hover {
border-top: 2px solid #E3351F;
background: #FAFAFA;
}
#nav li:hover ul{
display: block;
position: relative;
}
#nav li:hover li{
float: none;
font-size: 12px;
}
#nav li:hover a{
background: #FAFAFA;
color: #E3351F;
border-bottom: 2px solid #E3351F;
}
#nav li:hover li a:hover {
background: #E3351F;
color: #FAFAFA;
}

Código CSS Divs:

#propaganda {
position: ;
margin-top: 30px;
background: red /*#38727A*/;
width: 30%;
height: 500px;
float: left;
}
 #conteudo {
 position: ;
 margin-top: 30px;
 background: green;
 width: 600px;
 height: 500px;
 margin-left: 15px;
 float: left;
 }

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

lokaodomau    61

lokaodomau
Postado

Provavelmente as DIVs estão dentro de outra DIV onde deve conter o [inline]clear:both;[/inline], não sou fã de float, trabalhe com [inline]position[/inline] ao menos com os subitens.

 

Dê uma olhada no tutorial Menu drop down do Maujor.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito