| Spry horizontalen Menü Probleme in ie7
Robert Nitko - 11-07-2009 |
Hi. Wie viele vor mir, dass ich ein Heck einer Zeit mit der Lösung dieses Problems unter Menüleiste bin. Ich las und las und las seinen früheren Posten. Versucht, versucht und versucht Lösungen für Menschen ohne Erfolg. Was mich hier.
Ich habe 6 Hauptkategorien auf meinem Haupt-Menüleiste. Unter einigen von ihnen habe ich ein Dropdown-Untermenü. In anderen nichts. Einige Browser zeigen alle 6 Kategorien, während dh insbesondere bewegt sich mein 6. Artikel wieder unter meinem ersten Artikel. "crazy!"In den Worten von König Ludwig in Jungle Book. Was ein Ärgernis.
So sicher genug, ich las und versuchte alle die großen Dinge Richard Williams hat mit Menschen zu helfen so lange. Gott segne ihn. Ich bin sicher, dass er der gleichen Ausgabe krank. Aber er scheint zu sein, dem Gebiet die Expertin, Guru und Retter. Meine Hats off to you. Sie da man.
Ich bin so ruft ihn noch einmal für meine Herausforderung. Einen Vorbehalt. Ich werde Zugabe noch eine Kategorie in der Menüleiste schließlich zu 7 zu machen, aber Zweifel daran, dass keine Auswirkungen auf die Lösung haben werden.
Hier ist mein Code aus dem sprymenubarhorizontal.Css
@ charset "UTF-8";
/ * Sprymenubarhorizontal.Css - Version 0.6 - Spry Pre-Release 1.6.1 * /
/ * Copyright (c) 2006. Adobe Systems Incorporated. Alle Rechte vorbehalten. * /
/************************************************* ******************************
Layout-Informationen: Box-Modell beschreibt, Positionierung, Z-Reihenfolge
************************************************** ***************************** /
/ * Den äußersten Behälter der Menüleiste, Ein Auto-Feld "Breite" ohne Marge oder Padding * /
Ul.Menubarhorizontal
{
Margin: 0;
Padding: 0;
List-style-type: None;
Font-size: 100%;
Cursor: DefaUlt;
Breite: Auto;
}
/ * Setzen der aktiven Menüleiste mit dieser Klasse, Derzeit auf Z-index zu machen, dh Bug Platz: http:/ / therealcrisp.Xs4all.Nl / meuk / ie-zindexbug.html * /
Ul.Menubaractive
{
Z-index: 1000;
}
/ * Menüpunkt Container, Position Kindern, gemessen an diesem Container und eine feste Breite * /
Ul.Menubarhorizontal li
{
Margin: 0;
Padding: 0;
List-style-type: None;
Font-size: 100%;
Position: Relative;
Text-align: Left;
Cursor: Pointer;
Breite: 8em;
Float: Left;
}
/ * Untermenüs sollte unter ihrer Eltern erscheinen (oben: 0) mit einer höheren Z-index, Aber sie werden zunächst von der linken Seite des Bildschirms (-1000em) * /
Ul.Menubarhorizontal Ul.
{
Margin: 0;
Padding: 0;
List-style-type: None;
Font-size: 100%;
Z-index: 1020;
Cursor: DefaUlt;
Breite: 8.2em;
Position: Absolute;
Verließ: -1000em;
}
/ * Untermenü, das zeigt, mit der Klasse Bezeichnung menubarsubmenuvisible ist, Setzen wir auf auto links, so kommt es auf den Bildschirm unter dem übergeordneten Menüpunkt * /
Ul.Menubarhorizontal Ul..Menubarsubmenuvisible
{
Verließ: Auto;
}
/ * Menüpunkt Container gleichen fester Breite als Muttergesellschaft * /
Ul.Menubarhorizontal Ul
{
Breite: 8.2em;
}
/ * Untermenüs erscheinen soll leicht überlappend auf der rechten Seite (95%) und bis (-5%) * /
Ul.Menubarhorizontal Ul
{
Position: Absolute;
Margin: -5% 0 0 95%;
}
/ * Untermenü, das zeigt, mit der Klasse Bezeichnung menubarsubmenuvisible ist, Setzen wir auf 0 links, so kommt es auf den Bildschirm * /
Ul.Menubarhorizontal Ul..Menubarsubmenuvisible Ul..Menubarsubmenuvisible
{
Verließ: Auto;
Spitze: 0;
}
/************************************************* ******************************
Design-Informationen: Beschreibt Farbschema, Grenzen, Schriftarten
************************************************** ***************************** /
/ * Untermenü Container haben die Grenzen auf allen Seiten * /
Ul.Menubarhorizontal Ul.
{
Grenze: 1px solid # ccc;
}
/ * Menüpunkte sind ein helles Grau-Block mit Polsterung und keinen Text Dekoration * /
Ul.Menubarhorizontal ein
{
Anzeige: Block;
Cursor: Pointer;
Background-Farbe: # eee;
Padding: 0.5em 0.75em;
Farbe: # 333;
Text-decoration: None;
}
/ * Menüpunkte, die Maus über oder Fokus haben einen blauen Hintergrund und weißem Text * /
Ul.Menubarhorizontal ein:Hover, Ul.Menubarhorizontal ein:Fokus
{
Background-Farbe: # 33c;
Farbe: # fff;
}
/ * Menüpunkte, die mit Untermenüs sind so eingestellt, mit einem blauen Hintergrund und weißem Text * menubaritemHover offen /
Ul.Menubarhorizontal ein.MenubaritemHover, Ul.Menubarhorizontal ein.MenubaritemsubmenuHover, Ul.Menubarhorizontal ein.Menubarsubmenuvisible
{
Background-Farbe: # 33c;
Farbe: # fff;
}
/************************************************* ******************************
Untermenü Angabe: Stile, wenn es ein Untermenü unter einer bestimmten Menüpunkt
************************************************** ***************************** /
/ * Menüpunkte, die ein Untermenü haben die Klasse Bezeichnung menubaritemsubmenu und sind so eingestellt, um ein Hintergrundbild auf der linken (95%) und vertikal zentriert (50% Positioniert verwenden) * /
Ul.Menubarhorizontal ein.Menubaritemsubmenu
{
Background-image: Url (sprymenubardown.Gif);
Background-repeat: No-repeat;
Background-Position: 95% 50%;
}
/ * Menüpunkte, die ein Untermenü haben die Klasse Bezeichnung menubaritemsubmenu und sind so eingestellt, um ein Hintergrundbild auf der linken (95%) und vertikal zentriert (50% Positioniert verwenden) * /
Ul.Menubarhorizontal Ul a.Menubaritemsubmenu
{
Background-image: Url (sprymenubarright.Gif);
Background-repeat: No-repeat;
Background-Position: 95% 50%;
}
/ * Menüpunkte, die mit Untermenüs geöffnet sind, haben die Klasse Bezeichnung menubaritemsubmenuHover und sind so eingestellt, ein "Hover verwenden" Hintergrund-Bild auf der linken (95%) und vertikal zentriert (50% Positioniert) * /
Ul.Menubarhorizontal ein.MenubaritemsubmenuHover
{
Background-image: Url (sprymenubardownHover.Gif);
Background-repeat: No-repeat;
Background-Position: 95% 50%;
}
/ * Menüpunkte, die mit Untermenüs geöffnet sind, haben die Klasse Bezeichnung menubaritemsubmenuHover und sind so eingestellt, ein "Hover verwenden" Hintergrund-Bild auf der linken (95%) und vertikal zentriert (50% Positioniert) * /
Ul.Menubarhorizontal Ul a.MenubaritemsubmenuHover
{
Background-image: Url (sprymenubarrightHover.Gif);
Background-repeat: No-repeat;
Background-Position: 95% 50%;
}
/************************************************* ******************************
Browser-Hacks: Hacks unten sollte nicht geändert werden, wenn Sie ein Experte sind
************************************************** ***************************** /
/ * Hack für IE: Sicherstellen, dass die Untermenüs zeigen obige FormUlar-Steuerelemente, Unterlegen wir jeweils ein Untermenü mit iframe * /
Ul.Menubarhorizontal iframe
{
Position: Absolute;
Z-index: 1010;
Filter:Alpha (opacity:0.1);
}
/ * Hack für IE: Zur Erscheinung der Menüeinträge zu stabilisieren; der Schrägstrich in Float zu halten, dh 5.0 von parsing * /
@ media screen, Projektion
{
Ul.Menubarhorizontal li.Menubaritemie
{
Anzeige: Inline;
F \ Loat: Left;
Hintergrund: # fff;
}
}
Vielen Dank im Voraus.
Bob | |
