Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

passado

Problema com Drop-Down Horizontal

Recommended Posts

passado

Boas sou muito muito novato em webdesign no entanto gostava de colocar um menu horizontal com drop-down, o menu todo funciona bem o unico problema e que em IE em qualquer versao os sub-menus nao aparecem, alguem me consegue ajudar?

/* menu horizontal by micox */
#menu-hh { 
display: table;
}
#menu-hh * { 
margin: 0; 
padding: 0;
}
#menu-hh a { 
display: block; 
}
#menu-hh li { 
list-style: none; 
float: left; 
height: 1%; }
#menu-hh li ul { 
position: absolute;
visibility: hidden;
white-space: nowrap;
}

/* hack para navegadores que exigem width para elementos pos absolute (Opera) */
html:first-child>body .menu-hh li ul { width: 500px; }
#menu-hh li:hover ul, .menu-hh  li.over ul { visibility: visible;} /* a class  .over eh tecnica pro hover no IE */
#menu-hh li:hover ul li ul, .menu-hh li.over ul li ul{ visibility: hidden;}
#menu-hh li ul li:hover ul, .menu-hh li ul li.over ul{ visibility: visible;}
/* visual */
#menu-hh {
background: transparent;
margin: 0 auto 0;
overflow: hidden;
width: 760px;
position: relative;
text-align: left;
font-family: Trebuchet MS,Tahoma, Verdana, Arial, Serif;
}
#menu-hh a { font-weight: bold; text-decoration: underline; color: #000/*cor do texto*/; padding: 0 10px; line-height: 20px;}
#menu-hh a:hover { text-decoration: underline; background-color: # 090;}
#menu-hh ul li ul { background-color: # F3F; border: 10px solid # 000; }	
  
/*end menu*/

function DOMgetElementsByClassName($node,$className){
       /* Description: retorna um array com todos os elementos dentro
          de $node que possuam a classe indicada em $className
       Versão: 1.0 - 30/08/2006
       Author: Micox - Náiron J.C.G - micoxjcg@yahoo.com.br
       Site:   http://elmicox.blogspot.com
       Não retire estas informações pra não infringir direitos autorais!
       */
    var $node, $atual, $className, $retorno = new Array(), $novos = new Array();
    $retorno = new Array();
    for (var $i=0;$i<$node.childNodes.length;$i++){
       $atual = $node.childNodes[$i];
       if($atual.nodeType==1){// 1 = XML_ELEMENT_NODE
          $classeAtual = $atual.className;
          if(new RegExp("\\b"+$className+"\\b").test($classeAtual)){
             $retorno[$retorno.length] = $atual;
          }
          if($atual.childNodes.length>0){
             $novos = DOMgetElementsByClassName($atual,$className);
             if($novos.length>0){
                $retorno = $retorno.concat($novos);
             }
          }
       }
    }
    return $retorno;
    }

    function addEvent(obj, evType, fn){
       //adiciona evento, versao crossbrowser
       //retirado de http://elcio.com.br/crossbrowser/#7
       if (obj.addEventListener){
          obj.addEventListener(evType, fn, true)}
       if (obj.attachEvent){
          obj.attachEvent("on"+evType, fn)}
       }
function ativaHover(classe) {
            //ativa o hover para elementos n?o links, por causa de bug do IE
            //retirado de http://www.maujor.com/tutorial/ddownmenu-a.php
            var pais = DOMgetElementsByClassName(document.body,classe);
            for (var j=0; j<pais.length; j++) {
                        var sfEls = pais[j].getElementsByTagName("LI");
                        for (var i=0; i<sfEls.length; i++) {
                                   sfEls[i].onmouseover=function() {
                                               this.className+=" over";
                                   }
                                   sfEls[i].onmouseout=function() {
                                               this.className=this.className.replace(new RegExp(" over\\b"), "");
                                   }
                        }
            }
}

addEvent(window,"load",function () { ativaHover("menu-hh"); });

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.