2011-01-11 8 views
0

Ich lerne ein Dropdown-Menü zu stylen und habe ein paar Fragen.CSS Dropdown-Menü

können Sie die Dropdown-Listen sehen hier: http://jsfiddle.net/tomperkins/3M7Cb/

Meine Fragen sind:

  1. Wie kann ich einen Pfeil nach unten erscheinen auf jedem Elternteil Einzelteil erhalten (wenn ich versucht, es ersetzt der Hintergrund Eigenschaften).

  2. Wie kann ich das ganze Kind Bereich anklickbar sein, anstatt nur der Text selbst?

Wie immer alle Hilfe wirklich geschätzt.

Vielen Dank im Voraus,

Tom Perkins

Antwort

1

Für den Pfeil nach unten, ist meine Neigung eher ein Text-Objekt zu verwenden, als ein Bild:

ul li.top:after { 
content: "▼"; 
} 

Um den ganz li anklickbar :

ul li a { 
    display: block; 
    /* other stuff */ 
} 

JS Fiddle demo of both suggestions.


Herausgegeben von Hover-Stil des Pfeils nach unten anzupassen:

ul li.top:after { 
    color: #000; 
    content: "▼"; 
    float: right; 
} 

ul:hover li.top:after { 
    color: #ccc; 
} 

JS Fiddle demo

+0

Das ist wirklich hilfreich, danke David! –

+0

@Tom Perkins: es ist überhaupt kein Problem, Sie sind herzlich willkommen =) –

0

Frage 2> Ihr <a> Tag als Block gerendert werden muss, die bis nimmt die Bereich des Dropdown-Elements. Da Sie ein spezielles Tool zum Erstellen dieser Menüs verwenden, nehme ich an, dass es eine Konfigurationseinstellung (oder Ähnliches) gibt, mit der Sie dies einrichten können.

Verwandte Themen