2010-08-31 3 views
0

Cela peut sembler être une question courante qui a déjà été résolue car elle fait référence à well-known z-index bug dans IE7 et les versions antérieures. Cependant, cette situation est quelque peu unique; J'utilise un menu déroulant CSS qui utilise des listes imbriquées pour les sous-menus. Je l'ai utilisé plusieurs fois sur d'autres sites, mais généralement avec le premier niveau étant horizontal. Dans ce cas, le premier niveau doit être vertical et les sous-menus doivent voler plutôt que tomber. En plus de tout cela, tout est compliqué parce que le premier niveau "enveloppe" une courbe dans la conception et le menu ul flotte pour s'adapter à une disposition différente sur les pages internes. Le flottement provoque toutes sortes de problèmes avec des solutions apparentes, car si l'index z est plus élevé que le contenu de la page, les liens dans ce contenu sont couverts par des éléments de menu de niveau supérieur.Comment corrigeriez-vous cet exemple rare du bogue IE Z-index commun?

De toute façon, avec beaucoup de patience, je l'ai réussi à fonctionner parfaitement, sauf dans IE7 et inférieur. Le problème que j'ai est que IE veut mettre les sous-menus sous les éléments de menu de niveau supérieur (c'est le comportement attendu pour IE, je comprends cela). Mais, puisque les éléments de niveau supérieur sont sur une courbe, certains des menus déroulants finissent par être chevauchés par des éléments de niveau supérieur. En tant que correctif, certes affreux, j'ai utilisé le hack des étoiles dans mon CSS pour ajouter du rembourrage aux menus déroulants. Cela les rend fonctionnels, mais n'aborde pas vraiment le problème ou n'a pas l'air attrayant.

Donc, view the site, et laissez-moi savoir si vous avez des idées. Merci!

+0

Pour le problème des flottants: Vous avez probablement le bug de double marge. Si vous faites flotter un élément vers la droite, la marge de droite est doublée en ie6 et la même chose vaut pour la gauche. Vous pouvez résoudre ceci pour que vous fassiez un div interne et appliquez un remplissage à la div flottante et un reste de style à la div interne. – easwee

+0

Non, je n'ai aucun problème avec le bug de double marge, ou la taille de mes marges. Le rembourrage supplémentaire dans IE a été ajouté intentionnellement par moi. Merci quand même. –

Répondre

1

Vous voudrez prendre tous les li au niveau supérieur et définir leurs valeurs d'index z progressivement plus bas que vous descendez la page. Par exemple, en commençant par la "recherche de propriétés" du haut, attribuez des valeurs d'index z de 99, 98, 97, etc. Cela devrait faire en sorte que les éléments enfants (sous-menus) de chaque li soient sur une pile d'index z plus élevée que les éléments racine qui les suivent sur la page.

+0

C'est une idée géniale à laquelle je n'avais pas pensé! Je vais l'essayer aujourd'hui et vous laisser savoir comment ça se passe. –

Questions connexes