✔ Dropdown-Menü im FF3

[Precog]

Hallo,

ich habe mir ein Dropdown-Menü (horizontal) mit CSS und JS (eine JS-freie Version wäre zwar wirklich wünschenswert, aber irgendwie kann ich sie nicht zufriedenstellend auf die Beine stellen) zusammengebastelt und erfolgreich im IE und FF getestet. Dann kam der FF3 und brachte alles durcheinander. Es droppt zwar noch, allerdings nicht so wie im FF2. Die Dropdown-Liste verschiebt sich nach unten.

Folgendes scheint mir das Problem zu sein: Wenn ich in CSS definiere, dass das Dropdown (sagen wir mal "Wer","Wie","Wo") von "Über uns" beim Hover 20px unter dem "Über uns"-Link auftauchen soll, fängt der FF2 an der Unterkante der Schrift "Über uns" an zu zählen und der FF3 an der Unterkante der <li> bzw <a> "box". So ist im FF3 ein vertikaler Abstand von bsp. 20px zwischen dem Link "Über uns" und dessen "Dropdown-Box" zu sehen.

Ich poste mal den Code, bin wie immer für jede Hilfe dankbar (auch bezgl. JS-freie Version).

CSS:

#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	z-index:2;
}

/* ------------------------ */
/* STYLING 1st LINE */
/* ------------------------ */

#nav a {
	margin:12px 20px;
	display: block;
	width:auto;
}

#nav li {
	background:none;
	float: left;
	width:auto;
	height:38px;
}

#nav li.divider {
	background-image:url(../img/structure/menu_divide.gif);
	background-repeat:no-repeat;
	margin:0;
	width:2px;
	height:38px;
}

/* ------------------------ */
/* STYLING SUB / DROP DOWN */
/* ------------------------ */

#nav li ul a {
	margin:0 20px;
	width:auto;
	border:0px;
}

#nav li ul li {
	height:25px;
	width:160px;
	background:#2a2a2a;
}

#nav li ul li.space {
	height:15px;
	margin:0px;
	background:#2a2a2a;
}

/* ------------------------ */
/* OTHER */
/* ------------------------ */

#nav li ul {
	position: absolute;
	width:160px;
	left: -999em;
}

#nav li:hover ul {
	margin-top:10px;
	left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}

HTML:

<ul id="nav">
	<li><a href="#">Home</a></li>
	<li class="divider"></li>
	<li><a href="#">Who we are</a>
		<ul>
			<li><a href="#">About</a></li>
			<li><a href="#">History</a></li>
			<li><a href="#">Mission &amp; Vision</a></li>
			<li><a href="#">Where we are</a></li>
			<li><a href="#">The Team</a></li>
		</ul>
	</li>
	<li class="divider"></li>
etc.etc.etc.
</ul>

JS:

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

 

[Maik]

Hi,

eine übereinstimmende Position des Submenüs erziele ich in den FF-Versionen 1.5.x, 2.x und 3.x hiermit:

#nav a {
        margin:12px 20px 0;
        display: block;
        width:auto;
}

Was die JS-freie Version (für den IE<7) betrifft, kannst du dich mal bei Stu Nicholls' Dropdown-Menüs (Kategorie: Menus - Multi-Level CSS Only) umschauen.

mfg Maik

 

[Precog]

Super, danke, scheint das Problem gelöst zu haben (zumindest im FF3). Der ie hats allerdings nicht begriffen und das Dropdown mit 0 Abstand unter den Menülink gesetzt. Aber so:

#nav a {
	margin:12px 20px 0;
	_margin:12px 20px;
	display: block;
	width:auto;
}

gehorcht auch der ie.

Eine Frage noch: Wie stell ich es an, dass die Dropdown-"Boxen" sich in der Breite ihrem Inhalt anpassen (+xx px Abstand links und rechts)?

MfG,
Precog

 

[Maik]

Schau dir hierzu mal A variable width drop-down definition list an.

mfg Maik

 

[Maik]

Auf dein Menü bezogen würden die Änderungen und Ergänzungen folgendermaßen lauten:

#nav li ul li {
        height:25px;
        /*width:160px;*/
        background:#2a2a2a;
        float:none;
}

#nav li ul {
        position: absolute;
        /*width:160px;*/
        left: -999em;
}

mfg Maik

 

[Precog]

Danke. Laeuft wunderbar im FF, der IE packts nicht (wen wunderts...). Ist es auch moeglich, die Breite an den Menuelink anzupassen (sozusagen an den 'parent')?.

Danke fuer die Muehen!

 

[Maik]

Dies wäre dann aber nur mit festen Breitenangaben möglich.

mfg Maik

 

[Precog]

alles klar, danke. Ich belasse es erstmal bei der festgelegten Breite.