2012-08-28 12 views
6

Ich habe dieses Menü, das ich angepasst habe, um es wie eine Auswahl zu verwenden. Es funktioniert gut, zB auf Chrome, aber auf Firefox funktioniert nicht. Normales Verhalten ist: Wenn Menü im Fokus erweitert wird, werden die Links angezeigt (Hilfe und Abmelden) und wenn Sie darauf klicken, werden sie auf andere Seite im selben Browser umgeleitet. Falsches Verhalten auf Firefox: Menü erweitert Fokus, aber Links (hep und Abmelden) werden nicht umgeleitet.ein href "#" arbeitet nicht mit: Fokus auf Firefox Browser

<ul id="main"> 
       <li class="username" tabindex="1" > <a>USER</a> 
        <ul class="curent_buser"> 
         <li class="ai"><a class="jaximus"href="http://en.wikipedia.org/wiki/Wiki">Help</a></li> 
<li class="aj"><a class="jaximus" href="http://en.wikipedia.org/wiki/Wiki" name="logoff">Log Off</a></li>    </ul> 
       </li> 
      </ul> 

Warum diese firefox tut ??? Ich habe die letzte Version von ff: |

hier ist eine Geige Beispiel: http://jsfiddle.net/RwtHn/1152/

Antwort

5

Es ist, weil der Augenblick Sie entweder auf „Hilfe“ drücken oder „Abmelden“ das encompasing ein Element den Fokus erhält und aktiv ist, was diese „deaktiviert“ Regel:

#main li:focus ul, #main a:active + ul{ 
display:block; 
} 

So ist die Verbindung (oder genauer gesagt, die ul die Verbindung umfasst) verschwindet, bevor der Klick auf den Link abgeschlossen wurde.

Zumindest scheint dies zu sein, wie Firefox es behandelt.

EDIT: Es sollte

#main li.username:active ul 

oben Regel mit dem Hinzufügen des Wahl arbeiten.

+0

ja ich weiß :) aber wie kann ich das beheben und warum nur auf Firefox hat dieses Verhalten. – BurebistaRuler

+0

Nun möchten Sie, dass es nur angezeigt wird, wenn Sie darauf klicken? Wenn das Schweben auch in Ordnung ist, füge das einfach der obigen Regel hinzu: "#main li.username: hover ul" – gabtub

+0

Ich würde versuchen, die CSS-Regel so zu modifizieren, dass sie jedem fokussierten Element unter '#main li' entspricht. Auf diese Weise wären die Elemente sichtbar und die Links wären anklickbar. – orique

3

Ihre letzte Regel, um diese Änderung:

#main li:focus ul, #main a:active + ul, 
#main li ul:hover 
{ 
display:block; 
} 

Die #main li ul:hover Regel bedeutet, dass das Untermenü lange genug offen bleibt für den Klick zu registrieren.

Siehe forked JS Fiddle

P. S. Cooler Trick, ich habe noch nie eine Auswahlbox wie diese gesehen.

Verwandte Themen