selfhtml.de - Alles für den Webmaster!

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Multi-Level-Navigation im IE6 ohne JS

Autor: Netinja [Beiträge: 622]
Datum: 30.08.2010 21:15:26

@ NoName

Hast du es hinbekommen, so wie ich es beschrieben habe?

So ganz habe ich immer noch nicht verstanden, was genau du mit "drei gleich große Blöcke vertikal nebeneinander" meinst.
Vielleicht die "Submenü-blöcke" vertikal nebeneinander?

Hier habe ich dir mal ein Stylesheet für eine waagrechte Navigation deines Suckerfishmenüs gemacht:

body {
   font-family: arial, helvetica, serif;
   }
#nav,#nav ul {
   /* all lists */
padding: 0;
   margin: 0;
   list-style: none;
   float : left;
   width : 11em;
        width : 75em;
   }
#nav li {
   /* all list items */
position : relative;
   float : left;
   line-height : 1.25em;
   margin-bottom : -1px;
   width: 11em;
   }
#nav li ul {
   /* second-level lists */
position : absolute;
   left: -999em;
   margin-left : 11.05em;
   margin-top : -1.35em;
        margin-left : 1em;
        margin-top :0.0em;
   }

#nav li ul li {
   /* all list items */
      position : relative;
   float : none;  }




#nav li ul ul {
   /* third-and-above-level lists */
left: -999em;
        margin-left: 11em;
        top: 0em;
   }
#nav li a {
   width: 11em;
   width : 10em;
   display : block;
   color : black;
   font-weight : bold;
   text-decoration : none;
   background-color : white;
   border : 1px solid black;
   padding : 0 0.5em;
   }
#nav li a:hover {
   color : white;
   background-color : black;
   }
#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li.sfhover ul ul,#nav li.sfhover ul ul ul {
   left: -999em;
   }
#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li.sfhover ul,#nav li li.sfhover ul,#nav li li li.sfhover ul {
   /* lists nested under hovered list items */
left: auto;
   }
#content {
   margin-left : 12em;
   }

#nav li a {
   color: blue;
   }

#nav li ul li a {
   color: red;
   }

#nav li ul li ul li a  {
   color: green;
   }

#nav li ul li ul li ul li a  {
   color: black;
   }


es wäre schön, wenn du dich in deinem Thread nochmal äußern würdest.


LG
Netinja

Antwort schreiben

Username:	Usernamen registrieren
Passwort:	Passwort vergessen?
Thema:
	Bitte benutze für deinen Beitrag die Groß-/Kleinschreibung!
Beitrag:	> @ NoName > > Hast du es hinbekommen, so wie ich es beschrieben > habe? > > So ganz habe ich immer noch nicht verstanden, was > genau du mit "drei gleich große Blöcke vertikal > nebeneinander" meinst. > Vielleicht die "Submenü-blöcke" vertikal > nebeneinander? > > Hier habe ich dir mal ein Stylesheet für eine > waagrechte Navigation deines Suckerfishmenüs > gemacht: > > body { >    font-family: arial, helvetica, > serif; >    } > #nav,#nav ul { >    /* all lists */ > padding: 0; >    margin: 0; >    list-style: none; >    float : left; >    width : 11em; >         width > : 75em; >    } > #nav li { >    /* all list items */ > position : relative; >    float : left; >    line-height : 1.25em; >    margin-bottom : -1px; >    width: 11em; >    } > #nav li ul { >    /* second-level lists */ > position : absolute; >    left: -999em; >    margin-left : 11.05em; >    margin-top : -1.35em; > >         margin-left > : 1em; > >         margin-top > :0.0em; >    } > > #nav li ul li { >    /* all list items */ >       position : > relative; >    float : none;  } > > > > > #nav li ul ul { >    /* third-and-above-level lists */ > left: -999em; > >         margin-left: > 11em; >         top: > 0em; >    } > #nav li a { >    width: 11em; >    width : 10em; >    display : block; >    color : black; >    font-weight : bold; >    text-decoration : none; >    background-color : white; >    border : 1px solid black; >    padding : 0 0.5em; >    } > #nav li a:hover { >    color : white; >    background-color : black; >    } > #nav li:hover ul ul,#nav li:hover ul ul ul,#nav > li.sfhover ul ul,#nav li.sfhover ul ul ul { >    left: -999em; >    } > #nav li:hover ul,#nav li li:hover ul,#nav li li > li:hover ul,#nav li.sfhover ul,#nav li li.sfhover > ul,#nav li li li.sfhover ul { >    /* lists nested under hovered list > items */ > left: auto; >    } > #content { >    margin-left : 12em; >    } > > #nav li a { >    color: blue; >    } > > #nav li ul li a { >    color: red; >    } > > #nav li ul li ul li a  { >    color: green; >    } > > #nav li ul li ul li ul li a  { >    color: black; >    } > > > es wäre schön, wenn du dich in deinem Thread > nochmal äußern würdest. > > > LG > Netinja > >
Link (URL):
Titel für Link:
Grafik (URL):
	Die Breite der Grafik darf 468 Pixel nicht überschreiten.

E-Mail-Benachrichtigung:

wenn auf einen Beitrag zu diesem Thema geantwortet wird
nur wenn auf meinen eigenen Beitrag geantwortet wird
nie

Zum Abschicken deines Beitrags bitte die Schaltfläche "Abschicken" nur einmal anklicken und warten. Der Server braucht manchmal einige Zeit, bis er den Beitrag in die Datenbank übernommen hat. Wenn du die Schaltfläche mehrmals drückst, erscheint dein Beitrag auch mehrmals im Forum.

Bewerten Sie Ihren Webhosting-Provider

Wie zufrieden sind Sie mit Ihrem Webhosting-Provider? Gibt es Probleme beim Service, mit der Performance oder der Abrechnung?

Teilen Sie jetzt Ihre Erfahrungen mit anderen Webmastern und schreiben Sie eine Provider-Bewertung. Mit etwas Glück können Sie ein Apple iPad gewinnen!

Weitere Informationen und Teilnahme...