2009-07-24 8 views
0

Je souhaite créer des sous-menus dans IE à l'aide de CSS, mais IE ne fonctionne pas avec l'action de survol. Je ne veux pas utiliser JavaScript.Création d'un sous-menu avec css dans IE

Comment puis-je résoudre ce problème? Existe-t-il un autre moyen de créer des sous-menus sans CSS ou JavaScript?

Répondre

0

Que voulez-vous dire IE ne fonctionne pas avec l'action de vol stationnaire? IE6 et les versions antérieures ne prennent en charge que: hover sur les balises A et IE7 et les prend en charge plus tard sur n'importe quelle balise. Il est définitivement possible de faire des menus 100% CSS. Voici ce que j'ai trouvé avec une recherche rapide sur Google.

http://www.surguy.net/menu/index.html

+0

Cette méthode nécessite que le pseudo-sélecteur du premier enfant fonctionne – Ballsacian1

+0

Il s'applique également: hover to non ATags – Ballsacian1

0

IE6 et soutient en dessous de la :HOVER pseudo-classe sur <a> balises uniquement. Vous pouvez faire fonctionner votre étiquette <a> comme un élément de niveau bloc (je suppose que vous utilisez actuellement <ol><li>) en appliquant le CSS suivant:

a.submenu { display: block; } 
0

Je recommande fortement d'utiliser whatever:hover, une extension de HTC qui permet l'utilisation du: hover pseudo-classe sur tous les éléments, pas seulement les ancres, dans IE6.

L'utilisation est simple. Ajoutez ceci à l'en-tête, en changeant le chemin pour refléter votre installation:

<!--[if lte IE 6]> 
    <style type="text/css"> 
     body{behavior:url(path/to/iehover.htc);} 
    </style> 
<![endif]--> 

C'est tout!

+0

** @ cpharmston: ** Fonctionne uniquement lorsque JavaScript est activé. Une solution discrète est préférée. –

1

Vous pouvez utiliser le code suivant pour IE6 basé sur la bibliothèque jQuery

if (jQuery.browser.msie && navigator.userAgent.toLowerCase().indexOf('msie 6') > -1){ 
    jQuery(document).ready(function() { 
     jQuery('.menu li').hover(
      function() { 
       jQuery(this).addClass('hover'); 
      }, 

      function() { 
       jQuery(this).removeClass('hover');  
      } 
     ); 
    }); 
} 

S'il vous plaît changer le sélecteur ".menu li" à la vôtre et écrit en CSS de la façon suivante .menu li: hover,. menu li.hover {...}