Aufklappmenü per css für smartphone?

Hallo, wir haben auf folgender Seite mit dem Nachrichtenmodul und der Erweiterung news_categories eine Art Minikatalog erstellt.

Die Erweiterung news_categories wirft dabei für die entsprechenden Kategorien Menülisten aus.

http://kochkopf.com/index.php/shopping.html

Wir möchten nun die eine Kategoriengruppe (A-Z) als Links darstellen, die andere (Branchen) aber als Aufklappmenü.

Das haben wir per css auch hingekriegt und aus der Liste ein Manü erstellt, aber erstens verdrängt die Liste das untere div nach unten, das wirkt nicht elegant (was haben wir übersehen?).
Zum anderen funktioniert es nicht auf einem smartphone (iPhone), weil die erste Ebene bereits verlinkt ist und bei der Touchbedienung jedesmal der Punkt "Branchen" aktiviert wird, daher kann man die Unterpunkte nicht anwählen => unbrauchbar.

Hat jemand einen eleganteren, "touchkompatiblen" Vorschlag?

Zitat:

---

aber erstens verdrängt die Liste das untere div nach unten, das wirkt nicht elegant (was haben wir übersehen?).

---

Also das kann ich dir sagen. Level 2 ist mit display:none; ausgeblendet und beim hover wird es einfach wieder mit display:block; eingeblendet.

display:none; es wird nichts dargestellt, Level 2 nimmt also keinen Platz ein.
display:block; Level_2 wird dargestellt und braucht seinen Platz dafür.

Abhilfe kannst du schaffen, indem Level 2 (ul.level_2) absolut positioniert wird. CSS Code für entsprechende Dropdowns gibt es im Forum dutzendweise.

@ tab Danke, das macht Sinn, werde ich mal umsetzen.

Und die Sache mit dem Link auf "Alle Branchen"? Jemand eine Idee?

Der hat ja momentan 2 Funktionen, einmal zum Aufklappen der Liste und gleichzeitig die Verlinkung zu allen Nachrichten. Kann man die Verlinkung zun den Suchergebnissen irgendwie unterdrücken? Denn die brauchen wir nicht, alle Ergebnisse stehen ja schon auf der Shoppingseite.

Oder kann man die aufgeklappte Liste dazu bringen, das sie aufgeklappt bleibt? Wäre auch eine Lösung.