Ir para conteúdo

POWERED BY:

Arquivado

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

kreator

problemas com menu drop down

Por , em Desenvolvimento frontend

Recommended Posts

kreator    0

kreator
Postado

e ai galera fazia ja um tempo que eu não entrava aqui no imasters por falta de tempo ^^

 

agora to desenvolvendo um menuzinho drop down,peguei referencias do site do major e do tiago retondar aqui do forum que publicou um tutorial sobre esses menus no blog do ogordo.com!!

 

meu menu eh bem simples mas ta me dando uma dor de cabeça imenssa uhasuhsuhasuhsuhasuhasuhuhasuhuhasuha

 

css.php

 

<link href="menu.css" rel="stylesheet" type="text/css">

 

teste_menu_vertical.php

 

HTML

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	 <title>Menu com submenus</title>
	 <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<?
include "css.php";

?>

<body>


<ul id="mainnav"> 
 
 
<li><a href="#">PERSPECTIVA SUSTENTÁVEL</a>
 
<ul style="height:100px; width:150px;"> 
 
 
<div id="quem somos"><li><a href="#">QUEM SOMOS</a></li></div>
 
 
<div id="concepcao"><li><a href="#" style="margin-top:-10px;">CONCEPÇÃO</a></li></div>
 
 
<div id="foco"><li><a href="#" style="margin-top:-10px;">FOCO</a> </li></div> 
 
 


<ul> 
 

 
</ul> 

</ul> 
 
 
</li> 
 
<li><a href="#">PARCEIROS</a>

<ul style="width:170px; height:130px;"> 
 



<div id="quem somos"><li><a href="#">COLABORADORES</a></li></div>
 
 
<div id="concepcao"><li><a href="#"  style="margin-top:-10px;">PATROCÍNIOS</a></li></div>
 
 
<div id="foco"><li><a href="#"  style="margin-top:-10px;">PARCEIROS</a> </li></div> 


<div id="links"><li><a href="#"  style="margin-top:-10px;">LINKS</a> </li></div> 


 
</li>

</ul>
 
<li><a href="#">COMUNICAÇÃO</a>

<ul style="width:185px; height:60px; padding-top:5px;"> 
 



<div id="quem somos"><li><a href="#" style="margin-top:-10px;">FALE CONOSCO</a></li></div>
 
 
<div id="concepcao"><li><a href="#" style="margin-top:-10px;">GALERIA DE FOTOS</a></li></div>
 
 
</li>

</ul>





</li> 


 
 
<li><a href="#">DOCUMENTOS</a></li> 

<ul style="width:200px; height:90px; padding-top:5px;"> 
 

<div id="educacao"><li><a href="#" style="margin-top:-10px;">EDUCAÇÃO</a></li></div>

<div id="meio_ambiente"><li><a href="#" style="margin-top:-10px;">MEIO AMBIENTE</a></li></div>

<div id="desenvolvimento_humano_pnud"><li><a href="#" style="margin-top:-10px;">DESENVOLVIMENTO </a></li></div>
 
 

</li>

</ul>
 
 
</ul>

</body>
</html>
css.php

 

CSS

 

@charset "utf-8";
/* CSS Document */



*{/*Este nem precisa explicar, não é? CSS Reset básico*/
	margin: 0;
	padding: 0;
}
#mainnav{
	width: 680px; /*Defino a largura*/
	height: 40px; /*Defino a altura*/
	list-style: none; /*Tiro os bullets das listas*/
	background: #f7f7f7; /*Coloco uma cor de fundo*/
	margin: 0 auto; /*Centralizo*/
	position: relative; /*Defino position: relative, pois todos os filhos vão se posicionar em realação à ele*/
	border:0px solid #F00;
	

}

ul#mainnav li{
	float: left; /*Coloco os li um ao lado do outro*/
}




ul#mainnav li a{
	display: block; /*Pega toda largura do elemento pai*/
	height: 40px;
	font-size: 11pt; /*Configuro a fonte*/
	font-family: Arial, Helvetica, sans-serif; /*Configuro a fonte*/
	color: #545454; /*Configuro a fonte*/
	text-decoration: none; /*Configuro a fonte*/
	padding: 0 20px; /*Coloco um espaçamento interno*/
	line-height: 40px; /*Centralizo verticalmente*/
	border:0px solid #F00;
}


ul#mainnav li ul{
	
	list-style: none;
	background: #f7f7f7;
	display: none; /*Inicialmente ele não aparece*/
	position: absolute; /*Posiciona absolutamente*/
	border-radius: 5px;
	-moz-border-radius: 5px;
	border:2px solid  #000;
	float:left;
	}

ul#mainnav li ul li{
	float: left;
	border:0px solid #F00;

}

ul#mainnav li:hover ul{
	display: list-item; /*Quando passar o mouse na li, aparece o ul*/
	margin-top:40px;
	margin-left:-260px;

	
}

ul#mainnav li:hover ul li ul{
	display: none;
	border-radius: 5px;
	-moz-border-radius: 5px;
}

ul#mainnav li:hover ul li ul li{
	float: left;
	clear: both;
	/*Essas duas linhas acima podiam ter sido feitas assim: "float: none", mas por causa do nosso idolatrado Internet Explorer, usei essa gambiarra que acabei de inventar.*/
	width: 100%;
}

ul#mainnav li ul li:hover ul{
	display: block;
}


#quem somos{ position: relative;
	z-index:1;
}



#concepcao{
	
	margin-top:10px;
	
}

#foco{
	margin-top:10px;
}

#links{ margin-top:30px;}

ta muito gambiarra meu menu mais por incrivel q pareça só presi alinhar o sub menu no centro!!!

 

desde ja agradeço galera!!!! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

kreator    0

kreator
Postado

grande tiago,centralizar o sub menu em geral ^^

 

ja ta tudo nos conformes ,mas quando vo dar o margin-left ele esta dando um problema,o espaçamento ta meio 8 - 80, simplificando n estou conseguindo controlar o sub menu!!

 

vle a atenção man! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif como sempre ajudando d+

Compartilhar este post

Link para o post
Compartilhar em outros sites

K3lv!N    0

K3lv!N
Postado

Tambem to com esse problema...Tem outra forma de alinhar ele em geral?

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