(MOZILLA) JavaScript-freies Klappmenü

[Cheatah]

Hi,

einerseits zum Experimentieren, andererseits um meine Browser-Startseite etwas zu optimieren gestalte ich mir gerade ein nur auf CSS und HTML basierendes aufklappendes Menü. Zielsystem ist also ein hinreichend neuer Mozilla. Entsprechend habe ich auch keine Skrupel, XML mitten in HTML zu benutzen ;-)

Das bisherige Ergebnis:

submenu               { display:block; padding:0; margin:0; }
text:after            { padding-left:4px; width:10px; height:10px; content:url(file:///D:/Web.de/online/img/menu.png); }
items                 { display:none;  padding:0 2px 2px 2px; margin:0; position:absolute; background-color:#FFFFFF; border:1px solid #000000; }
item                  { display:block; }
submenu > items       { display:none; }
submenu:hover > items { display:block; }

<submenu>
  <text><a href="...">...</a></text>
  <items>
    <item><a href="...">...</a></item>
    <item><a href="...">...</a></item>
    <submenu>...</submenu>
  </items>
</submenu>

An Stelle der Links kann auch nur Text stehen, die Schachtelbarkeit ist angedeutet. Nun ergeben sich ein paar Probleme, die zu lösen ich leider nicht fähig war:

• Das ganze ist leider Blocklevel. Mir würde es verdammt gut schmecken, wenn das Menü als Inline-Element agieren würde. Meine diesbezüglichen "Erfolge" waren, dass sich das Untermenü unterhalb des umgebenden Blocklevel-Elements anordneten, linksbündig natürlich. Dummerweise muss man also ggf. mit der Maus quer über den ganzen Bildschirm, und bis dahin ist das :hover nicht mehr wirklich gegeben ... Der Workaround, Blocklevel-Elemente z.B. durch eine Tabelle zu erzeugen, macht mich keinesfalls glücklich.

• Vermutlich in die selbe Bresche schlägt dies: Ich habe keinen Weg gefunden, das Untermenü _rechts_ des Hauptmenüpunktes öffnen zu lassen. Klingt ja auch irgendwie logisch, dass die Tendenz in die nächste Zeile geht, solange es Blocklevel ist :-) Und _auf_ dem Hauptmenüpunkt wollte ich das Untermenü dann auch nicht öffnen lassen.

• Ein wenig nervig ist auch die Eiganart von Mozilla, die Grafik bei :after {url()} regelmäßig erst in einer Standardgröße darzustellen (irgendwas um die 14x14, schätze ich), um erst dann die echte Größe der Grafik zu beachten. Die width- und height-Angaben waren erfolgfrei.

Kann mir jemand zu dem einen oder anderen Punkt etwas sagen? Kritiken zu meinem Code werden natürlich auch gerne entgegengenmmen; aber bedenkt bitte, er hat noch Draft-Charakter :-)

Cheatah