CSS Sous-menu horizontal - IE 6,7 les deux ne fonctionnent pas, essayé avec quel vol stationnaire

Question

Je ne suis pas expert sur les menus css. Mais je connais le système de base pour faire un menu CSS. J'ai utilisé ce système auparavant et cela fonctionne, mais cette fois-ci cela ne fonctionne pas.

Le site est http://www.uniethos.com. Veuillez vérifier ce site

Ce menu fonctionne avec tous les autres navigateurs récents. Mais pas avec IE 6 & 7. Je sais que IE6 ne supporte pas hover sauf ancre. Donc avant que j'utilise Whatever Hover. Mais cette fois, il ne fonctionne pas et même avec IE7. Je ne sais pas pourquoi ça se passe. Peut être qu'il pourrait y avoir un problème avec mon css. S'il vous plaît vérifier le css.

Si IE 6 ou 7 n'est pas installé, vous pouvez en exécuter un de http://spoon.net/browsers/. Exiger d'installer un plugin.

Le CSS J'utilise pour le menu est

.glossymenu{ 
    background: #B4B3B3; 
    height: 30px; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
    display:inline-block; 
    position:relative; 

} 

.glossymenu ul 
{ 
    list-style: none; 
    padding: 0px; 
    margin: 0; 
    padding-left: 0px; 
} 

.glossymenu li ul 
{ 
    display:none; 
    position:absolute; 
    width: 80%; 
    top:30px; 
    left:0px; 
    background-color:#5B0C10; 
    border:0px; 
    z-index: 99; 
} 

.glossymenu li li a 
{ 
    padding: 0px 10px 0px 10px; 
}  

.glossymenu li li a:hover 
{ 
    background : #871016; 

} 

.glossymenu li{ 
    float:left; 
    padding: 0; 
} 

.glossymenu li a{ 
    float: left; 
    display:block; 
    position:relative; 
    color:#FFF; 
    text-decoration: none; 
    font-family: sans-serif; 
    font-size: 13px; 
    font-weight: bold; 
    padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/ 
    height: 30px; 
    line-height: 30px; 
    text-align: center; 
    cursor: pointer;  
} 

.glossymenu li a b{ 
    float: left; 
    display: block; 
    padding: 0 24px 0 8px; /*Padding of menu items*/ 
} 

.glossymenu li.current a, .glossymenu li a:hover{ 
    color: #FFF; 
    background: #5B0C10; 
    background-position: left; 
    text-decoration: none; 
} 

.glossymenu li a:visited{ 
    text-decoration: none; 
} 

.glossymenu ul li:hover ul 
{ 
    display: block; 
} 

Answer 1

Eh bien, je ne l'ai pas trouvé le problème. Mais j'ai corrigé le menu avec du code Javascript personnalisé.

sfHover = function() { 
    var sfEls = document.getElementById("glossymenu").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"), ""); 
     } 
    } 
} 
if (window.attachEvent) window.attachEvent("onload", sfHover); 

Les personnes confrontées au même problème peuvent trouver cela utile. Merci.

Answer 2

Bien sûr, le vol stationnaire est le meilleur. Mais je ne sais pas pourquoi ça ne fonctionnait pas. Si vous rencontrez le même problème, vous pouvez utiliser ce javascript. Mais vous devez comprendre le code.

sfHover = function() { 
// You may have to change the "glossymenu" id with your one 
    var sfEls = document.getElementById("glossymenu").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"), ""); 
     } 
    } } if (window.attachEvent) window.attachEvent("onload", sfHover); 

Dans mon cas, j'ai un ID div appelé "glossymenu". Vous devez changer cela avec votre identifiant. Et aussi de déclarer une autre classe CSS nommée "over". Dans mon cas -

.glossymenu li:hover ul, .glossymenu li.over ul 
{ 
    display: block; 
} 

Cela suffit pour un niveau menu déroulant. Vous n'avez pas besoin de quoi que ce soit: passez la souris si c'est bon pour vous.