✔ Horizontale verschachtelte Listen

[StupidBoy]

Hi,

ich verzweifle gerade an einem eigentlich simplen Menu.
Ich hab bis hier ein Menu geschrieben, das funktioniert allerdings im IE6/7 nicht so wie gewünscht. Bild 1 zeigt die korrekte Darstellung in IE8, Bild 2 die fehlerhafte Darstellung in IE6/7.

Nach längerem Probieren habe ich herausgefunden, dass die Elemente der ersten und zweiten Ebene auch in IE6/7 bündig dargestellt werden wenn man das Elternelement der Liste auf zweiter Ebene mit position:relative formatiert.
Dies hat allerdings zur Folge, dass auch dessen Kindelement (Liste auf zweiter Ebene) nur noch die Breite des Elternelements hat. Dies kann man nur umgehen, indem man eine feste Breite vorgibt, was Aufrgund der benötigten Flexibilität aber nicht in Frage kommt.

Gibts da 'nen vernünftigen Workaround oder steh ich einfach nur auf dem Schlauch?

PS: Style und Markup natürlich

	*{
		margin:0;
		padding:0;
		text-indent:0;	
	}
	ul{
		list-style-type: none;
	}
	li{
		border:1px solid #09F;
		float:left;	
	}
	#main{
		margin:100px 0 0 200px;
		position:relative;
	}
	#sub{
		position:absolute;
		top:20px;	
	}
/* Unbefriediegender Fix für MSIE <= 7 */
	li{
		position:relative;	
	}
	#sub{
left:0; /*vergessen*/
		width:500px;	
	}

    <ul id="main">
      <li>1 Lorem</li>
      <li>2 MIT SUBLIST
        <ul id="sub">
          <li>21 Dolor</li>
          <li>22 Lorem</li>
          <li>23 Ipsum</li>
          <li>24 Dolor</li>
        </ul>
      </li>
      <li>3 Ipsum </li>
      <li>4 Dolor </li>
      <li>5 Lorem </li>
      <li>6 Ipsum </li>
    </ul>

 

[Sublister]

[quote

]Dies kann man nur umgehen, indem man eine feste Breite vorgibt, was Aufrgund der benötigten Flexibilität aber nicht in Frage kommt.

Deine absolute Breitendeklaration für #sub spricht nicht gerade von Flexibilität

Wie dem auch sei ...

#sub{
        position:relative;
        top:0;   
        left:0;
    }

 

[Sublister]

Nachtrag: In der Menüstruktur sind übrigens ab der zweiten Menüebene keine weiteren (ID-, oder Klassen-) Bezeichner vonnöten, wenn man sich einfach des Selektors für Nachfahrenelemente bedient.

ul#main ul { bla-blubb }

Frohes schaffen. Prost!

 

[StupidBoy]

Ich schrieb ja auch, dass die Lösung aufgrund der benötigten Flexibilität nicht in Frage kommt.
Im übrigen hilft es nichts #sub mit position:relative zu formatiren. Das hat nämlich zur Folge, dass die Elemente der Zweiten ebene die erste Ebene beeinflussen, aber das ist nicht gewünscht (vgl. Abb. 1 im Anhang).

Das left:0 bringt auch nichts. Nutzt man dieses ohne das Elternelement (li) mit position:relative formatiert zu haben, so richtet sich die verschachtelte Liste am äußersten ul-Element aus (dieses ist relativ positioniert) und nicht am Elternelement. Positioniert man das li-Element relativ, so sind wir wieder bei meinem suboptimalen Fix vom Anfang (hatte das left:0 im Ausgangspost vergessen, Entschuldigung wegen evt. Konfusion).

Nachtrag: Natürlich sind die nicht notwendig, die Performance von getElementById() ist jedoch anderen Selektoren überlegen und von daher kann es durchaus sinnig sein, fürs Javascript ein bis zwei IDs mehr zu schreiben. Ganz abgesehen vom Komfort natürlich.

 

[Sublister]

Nachtrag #2.

ich verzweifle gerade an einem eigentlich simplen Menu.

So trivial (simpel) ist dein Vorhaben keineswegs, wenn man mal in einer ruhigen Minute (oder Stunde) die publizierten Dropline-Menüs vom Altmeister Stu Nicholls durchklickt, und bei ihrer Visite lediglich den Fokus auf die Positionierung / Ausrichtung der unteren Menüebene richtet.

Unter den vielen Variationen konnte ich gerade mal eines entdecken, das hier deinen Vorstellungen folgt: http://www.cssplay.co.uk/menus/inline-dropline.html

 

[Sublister]

Das left:0 bringt auch nichts. Nutzt man dieses ohne das Elternelement (li) mit position:relative formatiert zu haben, so richtet sich die verschachtelte Liste am äußersten ul-Element aus (dieses ist relativ positioniert) und nicht am Elternelement.

Diese Aussage trifft aber nur bei absoluter Positionierung des Submenüs zu.

Der dazugehörige Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
        <title>...</title>
        <style type="text/css">
        /* <![CDATA[ */
        *{
        margin:0;
        padding:0;
        text-indent:0;  
        }
        ul{
        list-style-type: none;
        }
        li{
        border:1px solid #09F;
        float:left; 
        }
        #main{
        margin:100px 0 0 200px;
        position:relative;
        }
        #main ul{
        position:relative;
        top:0;  
        left:0; 
        }
        /* Unbefriediegender Fix für MSIE <= 7 */
        /*li{
        position:relative;  
        }   */
        /*#sub{
        width:500px;    
        }*/
        /* ]]> */
        </style>
    </head>
    <body>
        <ul id="main">
            <li>1 Lorem</li>
            <li>2 MIT SUBLIST
                <ul id="sub">
                    <li>21 Dolor</li>
                    <li>22 Lorem</li>
                    <li>23 Ipsum</li>
                    <li>24 Dolor</li>
                </ul>
            </li>
            <li>3 Ipsum </li>
            <li>4 Dolor </li>
            <li>5 Lorem </li>
            <li>6 Ipsum </li>
        </ul>
    </body>
</html>

In meinem empfohlenen Menüdemo wirst du ebenso im CSS keine absolute Positionierung für die zweite Menüebene ausfindig machen.

Soviel zu deinen Behauptungen, dass mein eingangs unterbreiteter Vorschlag hier nicht hilft, geschweige denn was bringt.

 

[StupidBoy]

Hallo,

vielen Dank für dein Beispiel, du scheinst mich aber nicht zu verstehen (was nicht an dir liegen muss).
Wenn man #sub mit position:relative formatiert, dann beeinflusst #sub natürlich auch die Breite des umgebenden li-Elements (wie ja auch auf deinem Screenshot zu sehen), das möchte ich aber nicht und nur deshalb ist #sub absolut positioniert.
#sub soll linksbündig mit dem Elternelement sein, dieses aber nicht in der Breite beeinflussen.

Naja, ich werd mir mal das Menu von Nicholls ansehen, das sieht nach genau dem aus was ich suche, vielen Dank dafür, bei Nicholls hatte ich mich schon durchgeklickt und nichts gefunden.

Edith sagt: Nach Rücksprache mit Nicholls bin ich zu folgendem (funktionierenden) Ergebnis gekommen:

* {
	margin:0;
	padding:0;
	list-style-type:none;
	text-indent:0;
}

ul {
	position:relative;
}

#menu a {
	display:block;
}

#menu li {
	float:left;
}

#menu ul {
	white-space:nowrap;
	width:0;
}

#menu ul li {
	display:inline;
	float:none;
}

#menu ul li a {
	display:inline-block;
}

/* Fix für Webkit-Gesocks */
ul {
	margin-right:-20000px;
}

/* Fix für IE6 */
ul {
	float:left;
}