1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

[CSS] Menu Hori<ontal Drop-Down nao corre em IE

Discussão em 'Web Development' iniciada por passado, 22 de Janeiro de 2009. (Respostas: 0; Visualizações: 1082)

  1. passado

    passado Power Member

    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?

    Código:
    /* 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*/
    
    Código:
    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 - [email protected]
           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"); });
    
     

Partilhar esta Página