Problem mit (CSS)Aufklappmenü

    Ich habe heute morgen (da ich nicht schlafen konnte) mal das Menü meiner Clanpage aufgebessert und ein Aufklappmenü mit CSS realisiert.

    Zu sehen ist jenes hier: http://team-HysTeriX.com

    Im FireFox 2 & 3 funktioniert es einwandfrei.

    Jedoch werden die innersten Listen nicht als display:none dargestellt wie es unter CSS definiert ist.

    Das es mit dem IE5&6 Probleme gibt ist weitreichend bekannt und wird von mir/uns missachtet. Auf einen 7 Jahre alten Browser optimieren wir nichts (wenn man mal davon absieht das der Rest des Codes eh einige sehr erschrecken wird)...Webspell eben ;)

    Leider klappt es nicht einmal im IE7.

    Kann mir vielleicht jemand helfen?

    Hier nochmal der aussortierte reine Menü Code

    HTML:


    CSS:

    Soviel ich weiß ist hover bei div nicht zulässig. Hier muss man dann fairerweise sagen das der Firefox seinen eigenen Weg geht und der Internetexplorer sich an die Richtlinien hält.

    Solche Menüs sollten per Javascript realisiert werden damit sie in allen Browsern funktionieren.

    Viele Grüße

    Felix Preuß

    per Javascript wäre es sicherlich am einfachsten gewesen, jedoch wollte ich es gerne nur per CSS realisieren.

    Da es derzeit so funktioniert lasse ich es so.

    Ich arbeite derzeit an einem Redesign der Seite und versuche alles ohne Tabelle und mit validem Code umzusetzen, dort wird dann ein Javascript Menü zum Einsatz kommen.

    Danke für die Links, werd mir das nochmal genauer ansehen.

    Naja Webdesigner würde ich mich nicht nennen, ich bin ein Allrounder, ich kann von allem ein bischen (oder auch etwas mehr), aber nix in reiner Perfektion, und das obwohl ich perfektionist bin.

    Aber auchmir graut es davor ein Design an alle Browser anzupassen.
    Klar, das gehört unweigerlich dazu wenn man ein seriöses Projekt aufbauen möchte, nur leider müsste man dann fast von Grundauf alles alleine schreiben ;)

    Wenn man will das es gut wird, muss man es eben selbst machen.

    Webspell ist zwar sehr nett und einfach gestaltet (um mal meinen Clan als Beispiel zu nehmen) jedoch ist der Code dahinter, mit Verlaub und simpel ausgedrückt, SCHROTT; daher bringt es meiner Meinung nach nichts jetzt ein absolut valides Menü zu bauen, da es damit das einzige valide wäre.

    Mal schauen was die neue webspell Version bringt, wenn die genauso verwildert ist, werd ich mich anderweitig orientieren.

    Zitat von Alexander W.H. Wachert;221

    Jedoch werden die innersten Listen nicht als display:none dargestellt wie es unter CSS definiert ist.


    Der child-Selektor > wird erst ab IE7 unterstützt.

    Ja, das würde dann ungefähr so aussehen:


    Du musst nur jeder eingebetteten Liste eine eigene ID geben:

    Jetzt kannst musst du noch im CSS diesen Code:

    Code
    ul#hnav li>ul {
    display: none;
}
 ul#hnav li:hover>ul {
    display: block;
  }

    mit diesem ersetzen:

    Code
    ul#hnav ul#hnav_subMain li, ul#hnav ul#hnav_subClan li, ... [Alle einzeln aufzählen]
 {
    display: none;
}
 ul#hnav ul#hnav_subMain li:hover, [wieder alle mit :hover aufzählen] {
    display: block;
  }

    Müsste funktionieren, aber ich kann es ohne Testcase nicht 100%ig sagen.

    PS: Die Seite hat diverse Validierungsfehler!

    Wieso jeder ul eine eigene ID? Ich kann doch auch jeder eingebetteten ul eine Klasse geben ;) z.B. sub_hnav ;) das spart dann in den Deklarationen eine lange Auflistung.

    Aber jetzt fällt mir ein was dann nicht geht *g* wenn ich dann einen Button hover gehen alle Submenüs auf :P

    Das die Seite ansonsten "Schrottcode" hast ist mir leider klar, da kommt man bei Webspell kaum drumrum, die arbeiten in jedem Template noch mit Tabellen zum Layouten.

    Ich arbeite derzeit an einem anderen System und das wird zu 100% valide sein.