Como consigo arrumar o dropdown?

[baldit 0]

Olá,

 

Gostaria de saber como consigo arrumar o Dropdown para encostar na linha. Segue imagem abaixo:

 

http://imageshack.us/photo/my-images/842/dropfz.jpg/

 

 

 

Obrigado!

[wdc_black_ 0]

poste o código

[baldit 0]

<ul id="main_menu" class="nav">
 <li><a href="home">Home</a></li>
 <li><a href="empresa">Empresa</a></li>
 <li><a href="hospedagem">Hospedagem</a></li>
 <li><a href="servidores-dedicados">Servidores Dedicados</a></li>
 <li><a href="painel">Painel de Controle</a></li>
 <li><a href="tutoriais">Tutoriais</a>
<ul><li><a href="javascript:void window.open('videos/outlook.html', 'popup', 'width=700,height=500');">Configurar Outlook</a></ul>
 </li>
 <li><a href="suporte">Suporte</a></li>
</ul>

[wdc_black_ 0]

o código css tambem

[Bruno Augusto 417]

Veja se existe um padding-bottom ou um margin-bottom no elemento em que o menu está contido ou ainda um margin-top no elemento seguinte ao que citei.

 

O padding-bottom vai gerar um espaçamento interno. Se o menu estiver dentro de, sei lá, uma DIV com isso e o elemento seguinte não, vai dar essa diferença.

 

O margin-bottom faz o mesmo, porém com espaçamento exterior, forçando o elemento seguinte a não encostar nele.

 

E o margin-top faz o mesmo que o margin-bottom, porém quem tem ele é que não quer encostar no outro, ao invés do outro que não quer encostar nele.

[baldit 0]

Bruno, ai está o problema, não existe nada para a categoria "sub-menu". Acho que vou ter que criar uma div para ele.. pode me ajudar? me passando como deveria ficar a div "sub-menu" com alguns valores, eu iria ajustando aqui até ficar da forma adequada. Se puder montar o CSS e me passar eu agradeceria.

 

Obrigado

[Bruno Augusto 417]

Primeiro posta o HTML um pouco antes e um pouco depois desse que você postou acima, para vermos quem é / são os elementos-pai dessa lista (UL).

 

Posta também o CSS referente à esse menu E desse (s) elemento (s)-pai.

 

Daí, conforme for, nem precisará alterar seu HTML, apenas corrigir seu CSS.

[baldit 0]

Menu.css

		
	#menuContainer {			
		float: left;
		margin: 0px 0 0;
		position: relative;
		width: -950px;
		z-index: 9999;
	}
		#menuContainer ul { float: right; }

		#menuContainer li {				
			float: left;
			padding: 0 2px;
			position: relative;				
		}

		#menuContainer li:first-child { border: none; }

			#menuContainer a {					
				color: #fff;
				display: block;
				letter-spacing:1px;
				font-size:17px;
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;	
				-webkit-border-top-left-radius: 10px;
				-webkit-border-top-right-radius: 10px;
				-moz-border-radius-topleft: 10px;
				-moz-border-radius-topright: 10px;
				-webkit-transition: color 0;
				-moz-transition: color 0;
				-o-transition: color 0;  
				transition: color 0;						
			}

			#menuContainer ul li a {padding: 15px 15px 48px 15px;}

				#menuContainer .current-menu-item a, #menuContainer .current-menu-parent a, #menuContainer a:hover,  #menuContainer a.hover {

					color: #2D2E2D;	

				}



			#menuContainer ul ul {					
				background-color: #8bb026;
				display: none; 
				position: absolute;
				width: 185px;
				z-index: 99999;
				top:83px;
			}

				#menuContainer ul ul li {	
					border: none;
					padding: 0;
					width: 100%;
				}

					#menuContainer ul ul a {							
						font-size: 12px;
						border-bottom: 1px dotted #CCCCCC;
						border-radius: 0px;
						-webkit-border-radius: 0px;
						-moz-border-radius: 0px;
						padding: 15px;


					}

					.no_border{border-bottom:none !important}

					#menuContainer ul ul a:hover {
						border-radius: 0px;
						-webkit-border-radius: 0px;
						-moz-border-radius: 0px;
						background-color:#789131;					
					}




			#menuContainer ul ul ul {					
				left: 175px;
				top: 0;					
			}

			#menuContainer li:hover ul ul, #menuContainer li:hover ul ul ul, #menuContainer li:hover ul ul ul ul { display: none; }
			#menuContainer li:hover ul, #menuContainer li li:hover ul, #menuContainer li li li:hover ul, #menuContainer li li li li:hover ul { display: block; }

 

 

Um pouco antes e um pouco depois:

<div class="centerContainer" style="overflow: visible;">
<div id="menuContainer" class="fr">
<ul id="main_menu" class="nav">
 <li><a href="home">Home</a></li>
 <li><a href="empresa">Empresa</a></li>
 <li><a href="hospedagem">Hospedagem</a></li>
 <li><a href="servidores-dedicados">Servidores Dedicados</a></li>
 <li><a href="painel">Painel de Controle</a></li>
 <li><a href="tutoriais">Tutoriais</a>
<ul><li><a href="javascript:void window.open('videos/outlook.html', 'popup', 'width=700,height=500');">Configurar Outlook</a></ul>
 </li>
 <li><a href="suporte">Suporte</a></li>
</ul>
</div>
</div>
</div>

[Bruno Augusto 417]

Experimenta no margin do #menuContainer colocar mais um zero OU tirar dois deles.

 

Com quatro zeros é forma completa que diz que não haverá nenhuma margem para àquele elemento.

 

Com um só é o mesmo, mas na forma contraída.

 

O seu tem três zeros.

 

Pode ser que seja isso.

 

Outra possibilidade seria algum erro no posicionamento absoluto que você está fazendo. De repente tem pixels a mais ou a menos na sua definição top.

 

Se não resolver poste também a definição CSS do centerContainer, só para ter certeza.

[baldit 0]

Não deu certo!

 

Aqui está a do centerContainer

 

div.centerContainer {
width: 960px;
margin: 0 auto;
overflow: hidden;
}


div#headerPage .centerContainer {
	padding: 35px 0;
}

[Bruno Augusto 417]

Acho que achei o seu problema. Ainda bem que pedi a centerContainer

 

Vê a definição padding?

 

Da forma como está, significa que ambos as partes superior e inferior do elemento terão um espaçamento interno de 35px.

 

E como seu menu está dentro dela, fica espaçado.

 

Mude para:

 

padding: 35px 0 35px 0;

E vá ajustando o segundo 35px, que refere à parte de baixo, até juntar.

 

Observe, porém, que esta solução É GAMBIARRA. Por quê?

 

Primeiro que esse tipo de DIV-pai, com essas regras que você definiu na centerContainer normalmente englobam TODO o HTML. Você abre abaixo do <body> e fecha logo antes do </body>

 

Daí, SE necessário, o rodapé recebe um margin-top negativo para subir uns milímetros.

 

Outra coisa, posso estar enganado, claro, mas não é normal usar valores muito grandes para padding.

 

Eu vejo como menos errado, caso um padding de 5px ou 10px for insuficiente, controlar a distância que um elemento estará deste que definiu o padding através de UM margin do que aumentar o padding e usar trocentos margin para ajustar todos os outros elementos.

[baldit 0]

Amigo,

 

Alterei o que você pediu e mexi no segundo 35px para encaixar porém NEM MEXEU :(

 

Estou perdendo as esperanças já, kkkkk.

[Bruno Augusto 417]

Mexeu pra quanto? Experimenta zerar ele, antes de ir ajustando.

 

Se ainda assim não der certo, pelo Firefox, com a extensão Web deveoper Toolbar, no grupo Informações (acho que é isso), tem um que mostra informações do elemento.

 

Ativa e o mouse vira uma cruz. Clica em cima dessa linha está à deriva. Veja qual é o seletor dela e qual o seletor do pai dela.

 

Daí procura pelos mesmos paddings e margins nesses seletores. Pelo menos reduz a lista...