Ir para conteúdo

POWERED BY:

Arquivado

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

Capuweb

Posicionamento menu Drop-down IE6!

Por , em Desenvolvimento frontend

Recommended Posts

Capuweb    0

Capuweb
Postado

Olá!!

 

sou novo no forum....conheci o site o pouco tempo e gostei muito!

estou desenvolvendo um site e atravéz dele consegui tirar e aprenter muitas dicas!!

 

meu maior problema esta sendo o menu Drop-down no posicionanto do menu no IE6, no IE7 e 8 no Firefox esta uma beleza.... agora no IE6 o menu esta ficando na vertical!

 

segue o codigo a baixo:

 

<!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>Contra-Mestre Kino</title>
<link href="css_kino.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="menu">
<ul class="menu-hv">
<li><a href="#">Inicio</a>
<li><a href="#">C.M. Kino</a>
<ul>
<li><a href="#">Contra-Mestre Kino</a></li>
<li><a href="#">O Grupo</a></li>
<li><a href="#">Mestre Suassuna</a></li>
<li><a href="#">Jogo do Miudinho</a></li>
<li><a href="#">Graduações</a></li>
<li><a href="#">Alunos</a></li>
<li><a href="#">Downloas</a></li>
</ul>
</li>
<li><a href="#">A Capoeira</a>
<ul>
<li><a href="#">Origem</a></li>
<li><a href="#">Angola / Regional</a></li>
<li><a href="#">Instrumentos</a>
<li><a href="#">Músicas</a></li>
<li><a href="#">Danças                      >></a>
<ul>
<li><a href="#">Maculelê</a></li>
<li><a href="#">Dança Guerreira</a></li>
<li><a href="#">Dança do Fogo-Facão</a></li>
<li><a href="#">Puxada de Rede</a></li>
<li><a href="#">Samba de Roda</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Aulas</a></li>
<li><a href="#">Programação</a></li>
<li><a href="#">Galeria</a>
<ul>
<li><a href="#">Fotos                        >></a>
<ul>
<li><a href="#">Apresentações</a></li>
<li><a href="#">Dia-a-Dia</a></li>
<li><a href="#">Eventos</a></li>
<li><a href="#">Momentos</a></li>
</ul>
</li>
<li><a href="#">Videos</a></li>
</ul>
</li>
<li><a href="#">Notícias</a></li>
<li><a href="#">Mural</a></li>
<li><a href="#">Contato</a></li>
</ul>

</div>
</body></html>

Segue o CSS

 

#menu {
width: 760px;
height: 35px;
margin: 0px;
padding: 0px;
background: #003399;
}

/*
Menus drop-down horizontal-vertical (hv) e vertical-vertical (vv) até 4 níveis
by Micox - elmicox.blogspot.com - Ver. 2.0 - 20/02/08 - Creative Commons License
*/

.menu-hv { position: relative; margin: 0; padding: 0; display: block; zoom: 1;}
.menu-hv * { margin: 0; padding: 0; list-style: none;}
.menu-hv li { position: relative; line-height: 1.2em; vertical-align: top; }
.menu-hv a { display: block; zoom: 1; line-height: 1.2em; }
.menu-hv li ul { position: absolute; visibility: hidden; }
.menu-hv li:hover ul, .menu-hv li.hover ul { visibility: visible; }
.menu-hv li:hover ul ul, .menu-hv li.hover ul ul { visibility: hidden; }
.menu-hv li li:hover ul, .menu-hv li li.hover ul { visibility: visible; }

/* características horizontal-vertical */
.menu-hv:after, .menu-hv.after { content: "."; line-height: 0px; clear: both; display: block; visibility: hidden;}
.menu-hv li { float: left; }
.menu-hv li ul li { float: none; }
.menu-hv li ul li ul { position: absolute; left: 100%; top: 0; }

.menu-hv {
font: bold 13px Arial, Helvetica, sans-serif;
color: #FFFFFF;
}

.menu-hv li a {
color: #FFFFFF;
padding: 8px 12px;
text-decoration: none;
}

.menu-hv li ul {
background: #0033CC;
color: #FFFFFF;
width: 140px;
font: bold 11px Arial, Helvetica, sans-serif;
}

.menu-hv li ul li a {
background: #0033CC;
padding: 6px 8px;
text-decoration: none;
color: #FFFFFF;
font: bold 11px Arial, Helvetica, sans-serif;
border-left: 5px solid #0069D2;
}

.menu-hv li:hover, .menu-hv li.hover {
background-color: #0033CC;
color: #FFFFFF;
text-decoration: none;
border: 1px solid #0069D2;
}

* html * { color: expression( (function(who){ if(!who.MXPC){
who.MXPC = '1';
if(who.nodeName != 'A'){
who.onmouseenter=function(){ who.className += ' hover'};
who.onmouseleave=function(){ who.className = who.className.replace(' hover','')}; }
(who==who.parentNode.firstChild) ? who.className += ' first-child' : '';
} } )(this) , 'auto') }

só esta faltando esse detalhe para que eu possa continuar a desenvolver, por isso ficarei grato se poderem me ajudar!!

 

abraço....

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