✔ Rollover - Link änderung in einer 2. Leiste

[Maddin007]

Hi Leute,

also ich habe eine Menü Leiste und darunter ist noch eine zweite Leiste.

Wenn ich nun über den Link "news" in der ersten Leiste fahre, so sollen in der zweiten Leiste Links angezeigt werden wie z.B. "Wii News", "PS3 News" usw.

Also sozusagen "Unterlinks", die sich je nach "Hauptlink" ändern. Ich weiß nicht, wie man das besser erklären kann.

Ich bin für jede Hilfe, die ich bekommen kann, Dankbar!

MfG,
Maddin

 

[Maik]

Hi,

vielleicht helfen dir da Stu Nicholls' Dropdown-Menus (Menus - Multi-Level CSS Only) weiter?

 

[Maddin007]

Hi, danke für den Link, habe auf der Seite etwas gefunden, was ich bestimmt durch einige verschiebungen meinen Plänen anpassen könnte ABER..es ist JavaScript. Leider habe ich von JavaScript überhaupt keine Ahnung.

http://www.stunicholls.com/menu/pro_dropline_1.html

Kann man das nicht auch mit purem CSS realisieren?

 

[Maik]

Kann man

http://www.cssplay.co.uk/menus/pro_dropline2-5.html

 

[Maddin007]

Hey,
Klasse...Danke

 

[Maddin007]

Och mensch
Nun hats Perfekt geklappt aber der IE 6 macht Probleme.
Schaut mal: http://freesimsen.net/CSS/Kunde/

Wie soll ich das lösen

 

[Maik]

Hi,

hast du den CSS-Code aus der Vorlage 1:1 und vollständig übernommen? Die Original-Beispiele funktionieren nämlich im IE tadellos.

Vergleiche bitte auch nochmal den HTML-Code, denn da fehlt zum einen dem ersten ul-Element die Klasse .select, die im Original-Stylesheet aber in den meisten Selektoren auftaucht, und zum anderen sind die Submenüs falsch verschachtelt:

<ul>
      <li><a href="#">Home<!--[if IE 7]><!--></a><!--<![endif]--></li> <!-- falsch! -->
	  <!--[if lte IE 6]><table><tr><td><![endif]-->
	  <ul class="sub">
	  <li><a href="#">Test!</a></li>

	  <li><a href="#">Tester</a></li>
	  <li><a href="#">Lalalaa</a></li>
	  </ul>
	  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
      </li> <!-- gehört hierher -->
	  </ul> <!-- falsch! -->
	    <ul> <!-- falsch! -->
      <li><a href="#">News<!--[if IE 7]><!--></a><!--<![endif]--></li> <!-- falsch! -->

	  <!--[if lte IE 6]><table><tr><td><![endif]-->
	  <ul class="sub">
	  <li><a href="#">Sport 1</a></li>
	  <li><a href="#">Sport 2</a></li>
	  <li><a href="#">xD News</a></li>
	  </ul>
	  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
      </li> <!-- gehört hierher -->
    </ul>

 

[Maddin007]

Nein, habe nicht 1 zu 1 übernommen sondern eher nur gelernt wie es funktioniert um es dann selbst zu machen.

 

[Maddin007]

Gut, also Select ist nun drin und es geht auch im IE.
Aber es folgt leider KEIN a:hover in der ersten Leiste (so ein blauer Hintergrund).

Das mit dem UL stimmt schon so, denn wenn es so gemacht wird, wie du sagtest, dann überlagern sich die Links von Home und News. Also muss schon getrennt werden.

Ich wusste nicht, dass das so schwer wird - Hilfe

 

[Maik]

Hi,

wir sprechen hier doch über die empfohlene Vorlage http://www.cssplay.co.uk/menus/pro_dropline2-5.html?

In diesen Beispielen werden die Hauptmenüpunkte, bei dir "Home" und "News", eben nicht mit einzelnen ul-Elementen ausgezeichnet, sondern befinden sich alle innerhalb eines Listenelements mit der Klasse .select, und überlagern sich dennoch nicht. Somit wird's an deinem Stylesheet liegen, dass sie nicht richtig ausgerichtet werden.

Wieso übernimmst du nicht einfach den Code und passt ihn auf deine Seitenverhältnisse (Farben, Breite, Höhe) an?

Das Erfolgserlebins dürfte dann weitaus größer sein, als der Versuch, mit Code-Schnippseln daraus ein "eigenes" Menü auf die Beine zu stellen.

Warum nun im IE die :hover-Pseudoklasse nicht mehr greift, kann ich jetzt nicht nachvollziehen, da der Link http://freesimsen.net/CSS/Kunde/ auf die alte Test-Version verweist, und darin funktioniert sie einwandfrei.