Trädvy Permalänk
Medlem
Registrerad
Aug 2014

CSS dropdown meny

Hej! Jag håller på att göra en hemsida i Dreamweaver som ska vara till ett skolarbete. Jag är inte så jätte haj på allt som har med html/css/javascript att göra. Problemet som nu har uppstått är att jag inte kan klicka på länkarna i min dropdown meny som jag har gjort i css. Jag har haft denna video som en liten mall:

Jag har förstått att eftersom att man använde pseudo klasser så går det inte att klicka på hyperlänkarna. Det som är man fråga nu är om man på något sätt skulle kunna lösa detta med hjälp av javascript, eller om det går att lösa på något sätt alls. Jag skulle vara väldigt tacksam om någon visste någonting om detta. Skriv här eller skicka PM för mer detaljer.

Tack på förhand

Trädvy Permalänk
Medlem
Registrerad
Sep 2014

Det ska inte vara några problem att klicka på hyperlänkarna om dem är där. Så något galet har du nog gjort. Dock är det svårt att se problemet utan någon kod. Hur ser din html-struktur ut?

edit: För att enkelt visa allt, kan du slänga in koden på JsFiddle!

Trädvy Permalänk
Medlem
Registrerad
Aug 2014

Koden

Där är koden, kan det ha med :focus att göra att det inte funkar. har sett fler som använder :hover i sina dropdowns. Men jag skulle helst vilja ha effekten att man klickar för att den ska åka ner.

Edit: Eller ville du ha hela koden? det där är bara delen som menyn rör.

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Mar 2007

Att det inte går att klicka på länkarna i de utfällda menyerna beror på att så fort du trycker ner musknappen för att påbörja din navigering (navigering sker först när klicket är klickat, dvs när musknappen släppts) så gäller inte :focus längre på menyns förstanivå. Därav stängs undermenyn och undermenyns länkar döljs (och din navigering kan aldrig avslutas).

Därför använder sig andra av :hover istället för :focus.
Försök bygga om menystrukturen så att undermenyerna ligger inom huvudmenyns element, nestlade dvs. Samt med :hover.

Om du verkligen vill att menyn ska visas först vid klick så måste du tänka om och justera lösningen, en idé är att använda dolda kryssboxar och labels (för att hålla det fritt från javascript).