✔ vertikales CSS Dropdown Menü

[Maik]

aber muss ich wirklich jeden einzelnen Punkt in der CSS für moderne Browser für die andere CSS neu schreiben.

Schau dir die beiden CSS-Dateien genauer an, und überprüfe, welche der im "normalen" Stylesheet geänderten Eigenschaften im IE-spezifischen Stylesheet überhaupt vorkommen, und passe diese ggfs. an.

Es dürfte sich aber hierbei nur um die Eigenschaften bezüglich der Schrift- und Hintergrundfarbe, sowie der Dimension (Breite/Höhe) drehen, die du darin noch umstellen musst.

Die Sache mit den verschieden Hover Farben funktioniert nicht ganz: Im Link oben sieht man, dass "Home" zwar rot wird sobald man drüberfährt, allerdings wenn man sich im Submenü von Home befindet wieder weis (wie im CSS angegeben unter der "allgemeingültigen" Regel)
Auch mein Rettungsversuch mit:

#Home, #Home:hover { color:red; }

hat nicht funktioniert, da dann Home dauerhaft rot ist. Home soll aber nur rot sein, wenn man sich auf Home und im Home Submenü befindet.

aus

/* specific to non IE browsers */
.menu ul li:hover a {
	color:#fff;
	font-weight: bold;
	font-size:12px;
	/*background:#fff*/
}

wird

/* specific to non IE browsers */
.menu ul li:hover a {
	/*color:#fff;*/ /* auskommentiert = deaktiviert */
	font-weight: bold;
	font-size:12px;
	/*background:#fff*/
}

.menu ul li:hover a#Home { color:red; }

 

[Superdok]

K Danke, das mit dem Hover hat geklappt.

Zum verbleibenden Problem (zumindest für mich):
- Bekommt der IE sowohl von dem normalen CSS als auch von dem IE spezifischen seine Informationen? Denn im IE Stylesheet sind längst nicht so viele Punkte wie im normalen CSS.

- Trotz dieser Wissenlücke hab ich versucht es auch im IE anzupassen. Hat auch einigermaßen funktioniert. Zu sehen immernoch hier: ....

Die CSS Dateien:
Normal:
.....
IE:
....

Folgende Probleme (die mir aufgefallen sind), die ich noch nicht lösen konnte sind:
- Die Mouseover Effekte sowohl von dem Menü als auch vom Submenü (also dass das transparente farbig wird (braun und orange). Als ich versucht habe die background Eigenschaften zu löschen im CSS wurde bei Mouseover der Kasten weis. Anstatt dieser Einfärbung soll nämlich wie im FF das Dreieckchen (opaque2.png) (<--falls dieses Dreieckchen im IE überhaupt möglich ist)
- Problem mit dem Menüpunkt "Boxes":
1.) Er ist ca. 1px länger als die Submenüpunkte
2.) Vielleicht dadurch ist auch die Mouseover Eigenschaft der "Boxes" Submenüpunkte beeinträchtigt. Diese reagieren nur, wenn man auf den Text hovert und nicht (wie bei den Anderen) wenn man auf den Kasten hovert
- Menüpunkte (nicht Submenü) werden beim Hovern nicht Fett. Ich habs versucht, aber entweder wurde alles fett, auch das Submenü, oder garnichts.

(Hab ich noch nicht ausprobiert: - Die verschiedenen Hovereffekte (rot. grün...) für die Menüpunkte...vielleicht das gleiche wie im normalen CSS auch-muss ich ausprobieren)

// EDIT

Bin weiter gekommen:
- Schrift wird fett
- Es wird nicht mehr barun oder grün bei Mouseover. Das Dreick hab ich noch nicht

Beim "Boxes" Problem: keine Ahnung

// EDIT2
Ich weiß nicht warum, aber plötzlich kann mein IE6 transparente .png darstellen. Ich hab einfach bei Mouseoverstutus vom Submenü das Bild angegeben mit dem Dreick und dem transparenten weißen außenrum...und es ging

 

[Maik]

Wenn du meinen Vorschlag befolgst, funktioniert auch im IE der Hover-Effekt für die Hauptmenüpunkte:

<li><a class="hide" href="../menu/index.html" id="demos">DEMOS</a>

<!--[if lte IE 6]>
<a href="../menu/index.html" id="demos">DEMOS
<table><tr><td>
<![endif]-->

<ul>
<!-- SUBMENÜ -->
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

Das vermeintliche Problem mit den Boxen kann ich derzeit nicht so recht nachvollziehen.

 

[Superdok]

K also hier meine jetzige Version:
....

-Ich hab deinen Rat doch befolgt mit den Hoverstatus der Menüpunkte. Anstatt id="demos" habe ich id="Home". In allen beiden CSS habe ich dann auch deine CSS Regel mit eingebunden (natürlich dann mit #Home; im IE Stylesheet ganz unten) Im FF funktionierts im IE nicht.

- Ich weiß nicht ob du den IE 6 oder weniger hast und das Problem mit dem Menüpunkt "Boxes" sehen kannst, aber: Beim Hovern wird dieser (vielleicht nach unten) 1px größer. Und das Dreick über den Submenüpunkten sieht man nur wenn man über der Schrift ist und nicht über einer Submenübox.

Nochmal die andere Frage: Bezeieht der IE6 die Infos sowohl aus der normalen CSS als auch aus der CSS für den IE?

// EDIT
Wenn man bei der CSS Eigenschaft im IE .Table bei margin:-1px macht dann ist der Menüpunkt "Boxes" so groß wie er sein soll. Allerdings bleibt das Menü mit dem Mouseover der Submenüpunkte bei "Boxes". Aber falls es nicht anders geht, könnte man dies hinnehmen. Ich versuch aber weiter, denn bei den anderen Menüpunkten gehts ja auch ohne Probleme

 

[Maik]

Was heißt denn eigentlich immer dieses "K"?

Vergleiche bitte meinen Auszug aus dem HTML-Code mit deinem Seitenquelltext. Für den IE6 (und älter) werden die Hauptmenüpunkte mittels dem "Conditional Comment" gesondert erzeugt, und darin muss die ID #Home ebenfalls genannt werden. Die Stelle hatte ich aber in meinen beiden Quellcode-Beispielen fett markiert. Dann klappt's auch im IE6 mit dem Hover-Effekt, den du in der flyout_h.css festgelegt hast, sprich: die Regeln müssen nicht in der flyout_h_ie.css wiederholt werden, denn der IE lädt auch die flyout_h.css in das Dokument.

Dass die Submenüs im IE6 breiter sind, liegt einfach an der diskrepanten width-Deklaration für die Links in der flyout_h_ie.css.

Ansonsten kann ich im IE6 keine Vergrößerung der Submenüs feststellen, auch nicht beim Überfahren der Submenüs, und das Hintergrundbild erscheint, sobald man den Sublink berührt, und nicht blos den Linktext.

 

[Superdok]

Was heißt denn eigentlich immer dieses "K"?

Ok

Sorry, aber das andere hat mich verwirrt:

Für den IE6 (und älter) werden die Hauptmenüpunkte mittels dem "Conditional Comment" gesondert erzeugt, und darin muss die ID #Home ebenfalls genannt werden.

Laut dem Text, falls ichs richtig verstanden habe, muss die "ID #Home ebenfalls genannt werden] im CSS "für den IE6 (und älter)"

sprich: die Regeln müssen nicht in der flyout_h_ie.css wiederholt werden, denn der IE lädt auch die flyout_h.css in das Dokument.

Laut dem Abschnitt nur im CSS für moderne Browser. Im Prinzip hab ichs aber schon verstanden, auch wenn ich das oben nicht ganz verstanden habe, aber habe ich in meinem modernen Stylesheet nicht genau das was du oben geschreiben hast (den HTML Auszug). DENN: Im FF funktionierts ja.
Falls dich diese Frage nervt, sorry, brauchst sie nicht zu beantworten, vielleicht bin ich einfach zu doof dafür, um das zu verstehn.

Zum anderen Problem: Du hast da was falsch verstenden, vielleicht auch weils nicht richtig beschreiben war. Ich versuchs nochmal: Ich rede nicht von der Breite sondern von der Höhe. Diese hab ich aber jetzt in der neusten Version meiner Linksmittels der CSS Eigenschaft (im IE Stylesheet) unter .table durch "margin:-1px" gelöst. Die Höhe war allerdings auch bei allen Menüpunkten richtig AUßER bei dem letzen Menüpunkt "Boxes". (Dieses Problem ist allerdings gelöst(s.o.))
Jetzt nur noch ein Problem, das man auch NUR beim LETZEN Menüpunkt "Boxes" und zwar beim Submenü des letzen Menüpunktes "Boxes" sehen kann (bei den restlichen Menüpunkten funktioniert es im IE6 und im FF oder Opera 9 funktionierts überall): Das Problem beim letzen Submenü besteht darin, dass der Hoovereffekt nur bei Berührung des Linktextes funktioniert.

 

[Maik]

Ich hab dir doch den relevanten HTML-Code zweimal gezeigt, also hat es nichts mit dem Stylesheet zu tun.

Da du scheinbar betriebsblind bist, poste ich hier jetzt den vollständig angepassten HTML-Code, und markiere zusätzlich die relevante Stelle rot.

Dass im letzten Menüpunkt der Hover-Effekt nicht korrekt funktioniert, liegt wohl daran, dass der abschliessende "Conditional Comment" fehlt:

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="flyout_h.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="flyout_h_ie.css" />
<![endif]-->
</head>

<body>
<div class="container">
<div class="menu">

<ul>
<li><a class="hide" href="../menu/index.html" id="Home">HOME</a>

<!--[if lte IE 6]>
<a href="../menu/index.html" id="Home">HOME
<table><tr><td>
<![endif]-->

<ul>
<li><a href="#" title=" Latest News"><span>/</span>Latest News</a></li>
<li><a href="#" title="News"><span>/</span>News</a></li>

</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="index.html">MEDIA</a>

<!--[if lte IE 6]>
<a href="index.html">MEDIA
<table><tr><td>
<![endif]-->

<ul>
<li><a href="#" title="Pics"><span>/</span>Pics</a></li>
<li><a href="#" title="Sub Menue"><span>/</span>Sun Menue</a></li>
<li><a href="#" title="The zero dollar ads page"><span>/</span>News</a></li>
<li><a href="#" title="The zero dollar ads page"><span>/</span>News</a></li>

</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>

<!--[if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif]-->

<ul>
<li><a href="#" title="The zero dollar ads page"><span>/</span>News</a></li>
<li><a href="../layouts/body2.html" title="Cross browser fixed layout"><span>/</span>Fixed 2</a></li>

<li><a href="../layouts/body4.html" title="Cross browser fixed layout"><span>/</span>Fixed 3</a></li>
<li><a href="../layouts/body5.html" title="Cross browser fixed layout"><span>/</span>Fixed 4</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../boxes/index.html">BOXES</a>

<!--[if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../layouts/body2.html" title="Cross browser fixed layout"><span>/</span>Fixed 2</a></li>
<li><a href="../layouts/body2.html" title="Cross browser fixed layout"><span>/</span>Fixed 2</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>
</ul>

</div>
</div>
</body>
</html>

 

[Superdok]

Ohhhh, sorry sorry, da war ich ja wirklich blind. Ich ging die ganze Zeit vom CSS aus.
Jetzt funktioniert auch der letze Hovereffekt. Lag an dem fehlenden ""Conditional Comment"

Zu sehen hier: ...

Ich will zwar jetzt nochmal ungern auf den Hovereffekt (Schriftfarbe wird rot) ein gehen, aber auch trotz der "id="Home" im "Conditional Comment" funktioniert es im IE trotzdem nicht (bei mir zumindest). Aber wenn es so kompliziert ist, dann kann ich auch auf sowas verzichten, hauptsache das Menü funktioniert erst einmal.

Gruß
Dok

 

[Maik]

Hi,

ich kann in der flyout_h.css nirgends den Selektor finden:

#Home:hover { color:red; }

Denn der Selektor

.menu ul li:hover a#Home { 
	color:red;
}

wird vom IE6 (und älter) nicht unterstützt.

 

[Superdok]

K vielen Dank für alles. Klappt soweit alles wunderbar. Wusst nicht, dass der IE 6 und älter diese andere Regel nicht unterstützt.

Gruß
Dok