Überlagernde Menuelemente?

[smisonline2]

Hallo,

ich möchte ein Menu mit schrägen Überlagerungen erstellen. Allerdings krieg ich das nicht so richtig hin, wenn das zweite, dritte,.. Element aktiv ist bzw den Hovereffekt hat.

Hat da jemand eine Idee, wie man sowas realisieren kann?

Ich habe mal einen enstrpechenden Anhang beigefügt. Man sieht halt, das jetzt das zweie Element gehovert ist. Er müsste jetzt nach links weg auch orange den Hintergrund haben

Danke

 

[Jan-Frederik Stieler]

Hi,
du könntest per css3 ein Trapez und Schatten erzeugen: http://www.paulund.co.uk/how-to-create-different-shapes-in-css
Ältere IE-Versionen können das jedoch nicht.

Ansonsten musst du die Listenelmente mittels z-index anordnen. Das letzte Element hat dann den niedrigsten Wert und das vorderste den höchsten.

Grüße

 

[smisonline2]

Hallo,

ich habe jetzt das <ul> position:relative gemacht und die <li> absolut positioniert . Dann entsprechend die z-indexe und die breite gesetzt udn den Text nach rechts ausgerichtet.

Allerdings überlagert das sich noch nicht richtig und da das <ul> element nicht die Höhe der absolute elemente erkennt, werden die nachfolgenden elemente zu dicht positioniert. Ich könnte das zwar per Hand mit einer fixen Höhe machen, aber das müsste ja immer angepasst werden. Eventuell für diese beiden Probleme einen Tipp/Trick parat?

Danke

 

[Jan-Frederik Stieler]

Hi,
was heißt

Allerdings überlagert das sich noch nicht richtig

und welche nachfolgenden Elemente meinst du? Die li hast du doch ausgerichtet.

Grüße