CSS Menü soll nach rechts ausklappen?

[hawkmaster]

Hallo zusammen,
ich versuche gerade ein CSS Menü zu gestalten.
Ich habe als Grundstock das Beispiel von SelfHTML genommen.
http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern

Das nach unten aufklappen funktioniert soweit.
Ich würde jetzt zusätzlich gerne eine 3. Ebene hinzufügen das zusätzlich noch bei weiteren Untermenüs diese nach rechts aufklappen.
Die Struktur sieht wie folgt aus:

<ul id="Navigation">
    <li><a href="#Beispiel">Seite 1</a></li>

<li><a href="#Beispiel">Seite 2</a>
      <ul>
        <li><a href="#Beispiel">Seite 2a</a></li>
        <li><a href="#Beispiel">Seite 2b</a></li>
      </ul>
    </li>

<li><a href="#Beispiel">Seite 3</a></li>

<li><a href="#Beispiel">Seite 4</a>
      <ul>
        <li><a href="#Beispiel">Seite 4a</a></li>
        <li><a href="#Beispiel">Seite 4b</a>
   <ul >
    <li><a href="#">Seite 4b_1</a></li>
    <li><a href="#">Seite 4b_2</a></li>
   </ul>

</li>
        <li><a href="#Beispiel">Seite 4c</a></li>
      </ul>
    </li>

<li><a href="#Beispiel">Seite 5</a></li>
</ul>
Das CSS sieht so aus:
<style type="text/css">
  body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #ffffe0;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }
  ul#Navigation li {
    list-style: none;
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0.01em; padding: 0;
  }
  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    left: -0.01em;
    display: none;  /* Unternavigation ausblenden */
  }
  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation a {
    display: block;
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.1em 1em;
    text-decoration: none; font-weight: normal;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  ul#Navigation a:hover {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }

</style>

Die Untermenüs "Seite 4b_1, Seite 4b_2" sollen nun beim überfahren nach rechts eingeblendet werden.
Ich habe es mit diesem zusätzlichen CSS versucht.

ul#Navigation li ul li ul li{
    margin: 0; padding: 0;
    position: absolute;
    left: -0.01em;
    display: none;  /* Unter-Unter Navigation (rechts) ausblenden */
  }
 ul#Navigation li ul li ul li:hover{
    display: block;  /* Unter-Unter Navigation (rechts) in modernen Browsern einblenden */
 left: auto
  }

Das ausblenden funktioniert soweit.
Nur werden die Untermenüs nie wieder eingeblendet.

Wo mache ich meinen Fehler?
Ich muss zugeben das ich mich mit all den CSS Angaben noch ein wenig schwer tue.

vielen Dank und viele Grüße
hawk

[Engin]

Ave hawkmaster!

Auf dem ersten Blick fällt erstmal das untenstehende auf.

  

>   ul#Navigation li ul {  
>     display: none;  /* Unternavigation ausblenden */  
>   }  
>   ul#Navigation li:hover ul {  
>     display: block;  /* Unternavigation in modernen Browsern einblenden */  
>   }  
>    ul#Navigation li ul li ul li{  
>     display: none;  /* Unter-Unter Navigation (rechts) ausblenden */  
>   }  
>  ul#Navigation li ul li ul li:hover{  
>     display: block;  
>   }

Wo mache ich meinen Fehler?
Ich muss zugeben das ich mich mit all den CSS Angaben noch ein wenig schwer tue.

Es bleibt ja nicht nur beim CSS, da musst du noch das Javascript anpassen, damit auch die IEs 6 und kleiner mitspielen.

Grüße aus H im R an hawkmaster,
  Primus Enginus*

[hawkmaster]

Hallo Engin,
ich habe erst mal alles andere rausgenommen. Es soll erst mal im Firefox gehen.
Und das soll laut manchen Beispielen ja mit reinem CSS gehen.
Ich habe es gelesen das man für den IE noch ein paar Hilfsmittel einbauen muss.
Mir geht es erst mal darum wie ich es erreichen kann das die Menüs nach rechts aufgeklappt werden.

vielen Dank und viele Grüße
hawk

[Ingo Turski]

Hi,

Und das soll laut manchen Beispielen ja mit reinem CSS gehen.

geht es auch. Vergleiche die von Engin gequoteten relevanten Regeln: welches Element blendest Du ein und aus und welches solltest Du?

freundliche Grüße
Ingo

[hawkmaster]

Hallo Ingo,
auch dir vielen Dank für deine Hilfe.
hmm, ziemlich verwirrend für mich wegen den vielen UL und LI ;-)
aber ich denke mein Denkfehler war das hier:
ul#Navigation li ul li ul li:hover{

display: block;
  }

das letzte "li:hover" wirkt sich ja nie aus oder?

Ein bischen weiter bin ich nun:
ul#Navigation li ul li ul li{
    margin: 0; padding: 0;
    position: absolute;
    left: -0.01em;
    display: none;
  }
ul#Navigation li ul li:hover ul li{
 display: block;
 left: 150px;
}
So wird mir beim überfahren über "Seite 4b" zwar etwas nach rechts eingeblendet aber komischerweise immer nur ein Listeneintrag und zwar immer der Letzte?

Das kapier ich jetzt wirklich nicht mehr.

vielen Dank und viele Grüße
hawk

[Engin]

Ave hawkmaster!

das letzte "li:hover" wirkt sich ja nie aus oder?

Dein denkfehler passiert schon beim ersten, ich hätte das was ich grade aussortiert hatte noch kommentieren sollen,

  ul#Navigation li ul { /* hier wird li ul auf display: none; gesetzt */  
    display: none;  
  }  
  ul#Navigation li:hover ul { /* hier wird li ul auf display: block; gesetzt */  
    display: block;  
  }  
   ul#Navigation li ul li ul li{ /* hier wird li ul li ul _li_ auf display: none; gesetzt */  
    display: none;  
  }  
 ul#Navigation li ul li ul li:hover{ /* hier wird li ul li ul _li_ auf display: block; gesetzt */  
 display: block;  
  }

Dann möchtest du, das das Menu nach rechts ausklappt,

» ul#Navigation li ul li ul li{  

>     left: -0.01em;  /* diese Angabe ist hier überflüssig */  
>     display: none;  
>   }  
> ul#Navigation li ul li:hover ul li{  
>  display: block;  
>  left: 150px;   /* hier soll es nach rechts, warum gibst du das nicht an? */  
> }

Dann aber auch nicht vergessen, ul#Navigation li ul li ul li auf position: relative; zu setzen, da das auszuklappende sich andernfalls am übergeordneten orientiert.

So wird mir beim überfahren über "Seite 4b" zwar etwas nach rechts eingeblendet aber komischerweise immer nur ein Listeneintrag und zwar immer der Letzte?

An dieser stelle musst du dann noch die a:link, a:visited auf display: block; setzen und gegebenenfalls mit einer breite versehen.

Grüße aus H im R an hawkmaster,
  Primus Enginus*

[Antipitch]

Hi Engin,

meinst nicht, dass er besser die <ul>s verstecken bzw. einblenden und positionieren sollte? Dann bleiben die css Angaben auch (zumindest etwas) übersichtlicher.

Also

ul#Navigation li ul li:hover ul {
display: block;
left: 150px;
}

@@hawkmaster!

Selber machen/ lernen ist immer gut. Bißchen Anscheuungsunterricht kann aber auch nicht schaden: http://www.cssplay.co.uk/menus/dd_valid.html. Nicholls macht die IE6 Variante übrigens nicht per JS sondern mit conditional comments und etwas schrägem html u. css. Vielleicht nicht 1000%ig barrierefrei, aber valide...

Gruß
Antipitch

[hawkmaster]

Hallo Antipitch,
vielen Dank für deine Hilfe.

Was meinst du was ich mir die letzten Tage an Beispielen und Tutorial angesehen habe. Unter anderem auch dein Link.

ich wollte nun einfach mal selber was ausprobieren in der Hoffnung das ich dann die Zusammenhänge besser verstehe.
Ich hatte zum Beispiel ein tolles Menü gefunden:
(http://pfirsichmelba.de/artikel-scripts/suckerfish-barrierefrei.html)

Aber da bin ich mit den ganzen "em" Angaben nicht klargekommen.
Diese Lösung hat z.b. nur zweimal "position: absolute", einmal bei "ul" und dann noch bei "#sfnav li ul {".
In meinem ersten Beispiel (das von Self) geht das aber nur "relative" damit die Submenüs nach unten aufklappen.
Auch arbeitet die zweite Lösung ganz ohne "display: none".
Wenn ich es richtig verstanden habe machen die das "Verstecken" mit "left: -99em;"??

Ich beschäftige mich noch nicht so lange mit CSS, daher ist das für mich alles noch ein wenig verwirrend.

<!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=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
li {padding: 0;margin:0;}
body {font: normal 0.76em arial;}
#sfnav, #sfnav ul {
width: 25em;
list-style: none;
line-height: 1;
background: white;
font-weight: bold;
padding: 0;
border: solid #6633CC;
border-width: 1px 0;
margin: 1em 0 1em 0;
position: absolute;
}

#sfnav a {
display: block;
color: #644f34;
text-decoration: none;
padding: 0.25em 2em;
}

#sfnav a.daddy {
background: url(rightarrow2.gif) no-repeat 95%;
}

#sfnav li {
float: left;
width: 150px;
padding: 0;
}

#sfnav li ul {
position: absolute;
left: -99em;
width: 180px;
height: auto;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}
#sfnav li li {
  width: 180px
}
#sfnav li ul ul {
  margin: -1.75em 0 0 14em;
}
#sfnav li:hover ul ul, #sfnav li:hover ul ul ul{
   left: -99em;
}
#sfnav li:hover ul{
   left: auto;
}
#sfnav li li:hover ul, #sfnav li li li:hover ul{
   left: -2px;
}
#nav3 li li.over ul.leftover{
   left: -2px;
}
#nav3 #sfnav li.over,#sfnav li:hover {
background: #FFFF00;
}
</style>
</head>

<body>

<div id="nav3">
<ul id="sfnav">
 <li><a href="#">Menue 1</a>
  <ul>

<li><a href="#">Untermenue 1_1</a></li>
   <li><a href="#">Untermenue 1_2</a></li>

</ul>
 </li>

<li><a href="#">Menue 2</a>

<ul>
   <li><a href="#">Untermenue 2_1</a></li>

<li><a href="#" class="daddy">Untermenue 2_2</a>
    <ul>
     <li><a href="#">Untermenue 2_2_1</a></li>
     <li><a href="#">Untermenue 2_2_2</a></li>
    </ul>
   </li>

<li><a href="#">Untermenue 2_3</a></li>

</ul>
 </li>
</ul></div>
</body>
</html>

viele Grüße und vielen Dank
hawk

[Antipitch]

Hi hawkmaster,

du hast dir ja auch direkt was ziemlich Anspruchsvolles vorgenommen. Wobei für dynamische Menüs eigentlich nur der IE6 ein wirkliches Problem darstellt. Ob man das dann per JS oder so weit als möglich per css löst, ist letztlich auch eine Frage des persönlichen Stils.

Aber sieht doch schon gut aus und deine Mischung aus learning-by-doing und "abgucken" ist genau richtig so. Möglichst immer ein bißchen Theorie mitnehmen: http://www.w3.org/TR/CSS21/. Grundsätzlich führen in Sachen html/ css dann halt meistens mehrere Wege nach Rom (hast du ja schon gemerkt ;-).

Gruß
Antipitch

[Engin]

Ave Antipitch!

meinst nicht, dass er besser die <ul>s verstecken bzw. einblenden und positionieren sollte? Dann bleiben die css Angaben auch (zumindest etwas) übersichtlicher.

Ich finde, wenn du versucht hättest meinen Ansatz im ersten Post zu verstehen, hättest du das hier sicherlich nicht geschrieben.

@@hawkmaster,

Gerade die Angaben mit "position" sind mir noch manchmal etwas schleierhaft.

Da hast du Glück im unglück im richtigen Forum gelandet zu sein.
Soweit ist ja alles in Ordnung, nur hast du keine z-index definiert, damit kannst du eine hirarchie bestimmen, aber das nur bei positionierten Elementen (relative, absolute, fixed).

Wenn man nun auf das Untermenü Seite 4b geht, klappt zwar rechts die beiden Menüs "Seite 4b_1", Seite 4b_2" aus, aber es ist hinter dem Menüpunkt Seite 4C. Schöner wäre es wenn es darüber wäre.

Versuche es mit dem z-index.

Beispielsweise

  ul#Navigation, ul#Navigation ul {  
 position: absolute;  
 z-index: 1;  
  }  
  ul#Navigation li ul {  
 z-index: 2;  
  }  
ul#Navigation li ul ul { /* hier ist aber etwas falsch bzw. fehlt was */  
 z-index: 3;  
}

Das bekomme ich aber nicht hin.

Nanana, wir wollen doch nicht gleich aufgeben so kurz vor dem Ziel. :)
Ich saß 3 Tage an einem ähnlichen Problem, am Ende hat mich aus meinem Leid Patrick erlöst. :)

Grüße aus H im R an Antipitch,
  Primus Enginus*

[hawkmaster]

Hallo Engin,
das mit dem "z-index" war der richtige Tipp.
Vielen herzlichen Dank. Jetzt sieht es ganz gut aus.
Ich kannte das zwar mit dem "z-index" aber in diesem Fall bin ich nicht drauf gekommen weil in einem anderen Beispiel Scriptmenü das auch nicht vorkam und es hier trotzdem klappte.
Auch ist in diesem zweiten Beispiel das anders gelöst mit den "position"
Ich brauche bei "ul" position: absolute und bei "li" dann relative damit die Menüs nach unten aufgehen.:
ul#Navigation, ul#Navigation ul {
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    z-index: 1;
  }
ul#Navigation li {
    list-style: none;
    float: left;
    position: relative;
    padding: 0;
  }

Beim anderen Beispiel gibt es zweimal "absolute" und trotzdem erreicht man die gleiche Wirkung.

#sfnav, #sfnav ul {
width: 25em;
list-style: none;
line-height: 1;
background: white;
font-weight: bold;
padding: 0;
border: solid #6633CC;
border-width: 1px 0;
margin: 1em 0 1em 0;
position: absolute;
}

#sfnav li ul {
position: absolute;
left: -99em;
width: 180px;
height: auto;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}

Auch arbeiten die hier ganz ohne "display: none"
Ich vermute das die hier das mit "left: -99em;" lösen?

Falls es dich interessiert hier das andere Beispielscript:

<!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=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
li {padding: 0;margin:0;}
body {font: normal 0.76em arial;}

#sfnav, #sfnav ul {
width: 25em;
list-style: none;
line-height: 1;
background: white;
font-weight: bold;
padding: 0;
border: solid #6633CC;
border-width: 1px 0;
margin: 1em 0 1em 0;
position: absolute;
}

#sfnav a {
display: block;
color: #644f34;
text-decoration: none;
padding: 0.25em 2em;
}

#sfnav a.daddy {
background: url(rightarrow2.gif) no-repeat 95%;
}

#sfnav li {
float: left;
width: 150px;
padding: 0;
}

#sfnav li ul {
position: absolute;
left: -99em;
width: 180px;
height: auto;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}
#sfnav li li {
  width: 180px
}
#sfnav li ul ul {
  margin: -1.75em 0 0 14em;
}
#sfnav li:hover ul ul, #sfnav li:hover ul ul ul{
   left: -99em;
}
#sfnav li:hover ul{
   left: auto;
}
#sfnav li li:hover ul, #sfnav li li li:hover ul{
   left: -2px;
}
#nav3 li li.over ul.leftover{
   left: -2px;
}
#nav3 #sfnav li.over,#sfnav li:hover {
background: #FFFF00;
}
</style>
</head>

<body>

<div id="nav3">
<ul id="sfnav">
 <li><a href="#">Menue 1</a>
  <ul>

<li><a href="#">Untermenue 1_1</a></li>
   <li><a href="#">Untermenue 1_2</a></li>

</ul>
 </li>

<li><a href="#">Menue 2</a>

<ul>
   <li><a href="#">Untermenue 2_1</a></li>

<li><a href="#" class="daddy">Untermenue 2_2</a>
    <ul>
     <li><a href="#">Untermenue 2_2_1</a></li>
     <li><a href="#">Untermenue 2_2_2</a></li>
    </ul>
   </li>

<li><a href="#">Untermenue 2_3</a></li>

</ul>
 </li>
</ul></div>
</body>
</html>

viele Grüße
hawk

[Engin]

Ave hawkmaster!

Ich brauche bei "ul" position: absolute und bei "li" dann relative damit die Menüs nach unten aufgehen.:

Diese brauchst du, damit das aufzuklappende Menu einen Orientierungspunkt hat, nach dem er sich richtet.

Auch arbeiten die hier ganz ohne "display: none"
Ich vermute das die hier das mit "left: -99em;" lösen?

Richtig, mit diesem Trick arbeitet auch Ingos Infobox, der hat sich hier auch schon zu Wort gemeldet.
Mit left: -99em; wird das zu versteckende aus dem Viewport "raus gezogen" und beim hovern wieder "rein geholt".

Falls es dich interessiert hier das andere Beispielscript:

<homer>NEIN!</homer>, ich interessiere mich nur für SELF Code, mein Self oder hier Self, hauptsache Self. :-)

SELF ist der Mann!

Grüße aus H im R an hawkmaster,
  Primus Enginus*

[Engin]

Ave Engin!

Ich brauche bei "ul" position: absolute und bei "li" dann relative damit die Menüs nach unten aufgehen.:
Diese brauchst du, damit das aufzuklappende Menu einen Orientierungspunkt hat, nach dem er sich richtet.

Bei der Variante mit position: relative; richten sich die absoluten positionierungs angaben an dem Element aus, das position: relative; zugewiesen bekommt, das andere beispiel versteh ich auch noch nicht so ganz.

Grüße aus H im R an Engin,
  Primus Enginus*

[hawkmaster]

Hallo Engin,
nochmals recht herzlichen Dank für deine Hilfe.
Jetzt habe ich mal weiter ausprobiert und bin auch weitergekommen.
Ich hätte noch einige Fragen dazu aber ich weiss nicht ob das zuviel wird :-)
Gerade die Angaben mit "position" sind mir noch manchmal etwas schleierhaft.

Eine Kleinigkeit stört mich noch.
Wenn man nun auf das Untermenü Seite 4b geht, klappt zwar rechts die beiden Menüs "Seite 4b_1", Seite 4b_2" aus, aber es ist hinter dem Menüpunkt Seite 4C. Schöner wäre es wenn es darüber wäre.

Das bekomme ich aber nicht hin.

Hier mal die ganze Seite:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynamisch Navigationsleisten einblenden</title>
<style type="text/css">
  body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #ffffe0;
  }
  ul#Navigation, ul#Navigation ul {
    margin: 0;
 padding: 0;
    text-align: center;
 position: absolute;
  }
  ul#Navigation li {
    list-style: none;
    float: left;
 position: relative;
 padding: 0;
  }
  ul#Navigation li ul {
    margin: 0; padding: 0;
    left: -0.01em;
    display: none;  /* Unternavigation erste Ebene ausblenden */
  }
  ul#Navigation li:hover ul {
 display: block;  /* Unternavigation erste Ebene einblenden */
  }
  ul#Navigation a {
    display: block;
    width: 6.4em;
    padding: 0.1em 1em;
    text-decoration: none; font-weight: normal;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  ul#Navigation a:hover {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }
ul#Navigation li ul li ul li{/* Unternavigation seitliche Ebene ausblenden */
    display: none;
}

ul#Navigation li ul li:hover ul li{/* Unternavigation seitliche Ebene einblenden und nach recht schieben */
 display: block;
 left: 4em;

}
ul#Navigation li ul ul {/*damit rechts eingeblendetes Menü richtig daneben steht*/
 margin: -0.75em 0 0 4em;
}

</style>
</head>
<body>
<h1 id="Beispiel">Dynamisch Navigationsleisten einblenden</h1>

<ul id="Navigation">
    <li><a href="#Beispiel">Seite 1</a></li>

<li><a href="#Beispiel">Seite 2</a>
      <ul>
        <li><a href="#Beispiel">Seite 2a</a></li>
        <li><a href="#Beispiel">Seite 2b</a></li>
      </ul>
    </li>

<li><a href="#Beispiel">Seite 3</a></li>

<li><a href="#Beispiel">Seite 4</a>
      <ul>
        <li><a href="#Beispiel">Seite 4a</a></li>
        <li><a href="#Beispiel">Seite 4b</a>
   <ul >
    <li><a href="#">Seite 4b_1</a></li>
    <li><a href="#">Seite 4b_2</a></li>
   </ul>

</li>
        <li><a href="#Beispiel">Seite 4c</a></li>
      </ul>
    </li>

<li><a href="#Beispiel">Seite 5</a></li>
</ul>

</body>
</html>

viele Grüße
hawk