CSS Pull-Down Menü für IE6 - IE8 und mehr.

[XenonNi]

Frohe Ostern Community,

ich bin gerade dabei ein Pulldown-Menü zu erstellen mit Hilfe dieses Scripts (klick hier).

Dieses Script funktioniert wunderbar im IE ab Version 6, FF, Safaria usw..

Nun habe ich dieses Script etwas angepasst und meine ganzen Inhalte reingepackt. Jetzt funktionieren einige kleine Sachen nicht.

Folgende Probleme stelle ich bei mir fest.

1. Hauptnavi (also 1. Ebene: Home, Produktinformation, Produktkatalog usw.): Hier hätte ich gerne das sich die Schriftfarbe in weiß fäbrt sobald man die Schaltfläche berührt und der Hintergrund dunkelblau ist.
-> Momentaner Stand:
- Schrift färbt sich nur weiß wenn man auch auf die Schrift fährt.
- Hintergrundfläche in dunkelblau funktioniert.

2. Im IE6 klappt zwar das ausklappen des Menüs, jedoch sind keine farblichen Effekte beim Hovern ersichtlich.


Hier der Link zur HTML: hier.
Und die CSS: hier.


Ich hoffe mir kann jmd hierbei helfen, da ich schon seit einigen Tage hierbei verzweifle.

Grüße

 

[QXARE]

Die <a> Tags als display: block; formatieren (Breite und Höhe anpassen) und

			#navi li:hover {
				background: #003399;
				color:#FFFFFF;} 
				
			#navi li:hover li {
				background: #FFFFFF;
				color:#000000;} 
				
			#navi li:hover li:hover {
				background: #b2c1e0;}     
				
			#navi li:hover ul {
				display:block;}

dementsprechend abändern.
Sollte beide Punkte beheben weil dann der Link über das ganze Listenelement geht.

Das es im IE6 nicht funktioniert liegt daran dass nur der <a>-Tag die :hover Pseudoklasse unterstützt. Deshalb verwendest du ja auch ein Script welches dir mit mouseover das hovern des Listenelements simuliert um das Ausklappen zu ermöglichen. (Obiges behebt dieses Problem)

 

[XenonNi]

Guten Morgen,

leider weiß ich nicht genau wie ich dieses jetzt machen soll.

           #navi li:hover {
                background: #003399;
                color:#FFFFFF;} 
                
            #navi li:hover li {
                background: #FFFFFF;
                color:#000000;} 
                
            #navi li:hover li:hover {
                background: #b2c1e0;}     
                
            #navi li:hover ul {
                display:block;}

diese Stimmen ja eigentlich von der Formatierung her.

Und den <a> Tag muss ich dann

#navi a {
display: block;}


Vielen Dank schonmal

 

[QXARE]

           #navi li a:hover {
                background: #003399;
                color:#FFFFFF;} 
                
            #navi li li a {
                background: #FFFFFF;
                color:#000000;} 
                
            #navi li li a:hover {
                background: #b2c1e0;}     
                
            #navi li:hover ul {
                display:block;}

So sollts denk ich gleich funktionieren.

 

[XenonNi]

Guten Morgen QXARE,

vielen Dank für deine Mühe. Hab es jetzt hinbekommen.

Also falls es jmd mal interessiert kann er auf die oben genannten Links gerne mal zurückgreifen.