[Resolvido] Menu DropDown

[FranJun 0]

Olá bom dia pessoa eu fiz um Menu Dropdown para um site que eu estou desenvolvendo e não estou achando um JavaScript que faça descer meu menu Dropdow... Alquem poderia me indicar um que poderia funcionar no meu menu? Eu ficaria muito grato...

 

O CSS:

#mn1{
position:absolute;
margin-top: 68px;
margin-left: 330px;
width: 569px;
height: 100px;
z-index:1;
}

#mn1 ul{
margin:0;
padding:0;
}

#mn1 ul li{
list-style:none;
float:left;
}

#mn1 li ul {
position: absolute;
left: -1000em; 
margin: 0;
width: 100px;
/* display:none; */

}

#mn1 li:hover ul, #mn1 li li:hover ul {
left: auto;
}

.dw_a a{
padding: 5px 0 5px 5px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration:none;
display:block;
background:#ffffff;
color:#014584;
border: 1px solid #b4cedf;
width: 145px;
}

.dw_a a:hover{
color: #a28b04;
}


/* Fim da Página CAB */


/* ============================================================================================================== */

.link_a a{
text-decoration:none;
text-align:center;
display:block;
color:#34acff;
width: 100px;
height: 100px;
}

.link_a a:hover{
color: #fadd34;
}

.link_b a{
text-decoration:none;
text-align:center;
display:block;
color:#34acff;
width: 100px;
height: 100px;
}

.link_b a:hover{
color: #fadd34;
}

.link_c a{
text-decoration:none;
text-align:center;
display:block;
color:#34acff;
width: 90px;
height: 100px;
}

.link_c a:hover{
color: #fadd34;
}

.link_d a{
text-decoration:none;
text-align:center;
display:block;
color:#34acff;
width: 82px;
height: 100px;
}

.link_d a:hover{
color: #fadd34;
}

.link_e a{
text-decoration:none;
text-align:center;
display:block;
color:#34acff;
width: 82px;
height: 100px;
}

.link_e a:hover{
color: #fadd34;
}

.link_f a{
text-decoration:none;
text-align:center;
display:block;
width: 115px;
height: 100px;
color:#FFFFFF;
}

.link_f a:hover{
color: #fadd34;
}

 

 

O menu Dropdown:

<div id="mn1">
     <ul>
       <li><span class="link_a"><a href="#">LINK 1</a></span>
         <ul>
           <li><span class="dw_a"><a href="#">Link a</a></span></li>
           <li><span class="dw_a"><a href="#">Link b</a></span></li>
           <li><span class="dw_a"><a href="#">Link c</a></span></li>
           <li><span class="dw_a"><a href="#">Link d</a></span></li>
           <li><span class="dw_a"><a href="#">Link e</a></span></li>
           <li><span class="dw_a"><a href="#">Link f</a></span></li>
           <li><span class="dw_a"><a href="#">Link g</a></span></li>
         </ul>
       </li>
       <li><span class="link_b"><a href="#">LINK 2</a></span>
         <ul>
           <li><span class="dw_a"><a href="#">Link a</a></span></li>
           <li><span class="dw_a"><a href="#">Link b</a></span></li>
           <li><span class="dw_a"><a href="#">Link c</a></span></li>
         </ul>
       </li>
       <li><span class="link_c"><a href="#">LINK 3</a></span>
         <ul>
           <li><span class="dw_a"><a href="#">Link a</a></span></li>
           <li><span class="dw_a"><a href="#">Link b</a></span></li>
           <li><span class="dw_a"><a href="#">Link c</a></span></li>
           <li><span class="dw_a"><a href="#">Link d</a></span></li>
           <li><span class="dw_a"><a href="#">Link e</a></span></li>
           <li><span class="dw_a"><a href="#">Link f</a></span></li>
           <li><span class="dw_a"><a href="#">Link g</a></span></li>
           <li><span class="dw_a"><a href="#">Link h</a></span></li>
           <li><span class="dw_a"><a href="#">Link i</a></span></li>
         </ul>
       </li>
       <li><span class="link_d"><a href="#">LINK 4</a></span></li>
       <li><span class="link_e"><a href="#">LINK 5</a></span></li>
       <li><span class="link_f"><a href="#">LINK 6</a></span>
         <ul>
           <li><span class="dw_a"><a href="#">Link a</a></span></li>
           <li><span class="dw_a"><a href="#">Link b</a></span></li>
           <li><span class="dw_a"><a href="#">Link c</a></span></li>
           <li><span class="dw_a"><a href="#">Link d</a></span></li>
           <li><span class="dw_a"><a href="#">Link e</a></span></li>
           <li><span class="dw_a"><a href="#">Link f</a></span></li>
         </ul>
       </li>
     </ul>
   </div>

[William Bruno 1501]

utilize este do maujor:

 

http://maujor.com/tutorial/ddownmenu.php

[FranJun 0]

Eu ja tentei usar esse do maujor e adaptar para o meu mais não está dando certo. O problema é esse que fiz tem imagens no menu e ai por sua vez quando passado o mouse abreria o menu Dropdown dele, mais quando coloco o JavaScript não funciona no IE6 e 7 mais nos outro sem o Script funciona.

 

[William Bruno 1501]

leia o tutorial, além do js, você precisa declarar uma classe no css.

 

note que apenas o ie6 possui o bug de não reconhecer o :hover, na tag li, por isso q os outros não precisam desse js.

leia o tutorial e faça corretamente, a sua solução está lá.

 

 

Ctrl+Shift+J para te ajudar a debugar.

[FranJun 0]

Valeu muito Obrigado