Probleme mit Navigation

[Lena1981]

Hallo,
ich wollte aur meiner Seite folgende Navigation einbauen und für mich anpasssen: http://demo.ourtuts.com/menu/index.html
Der CSS-Code dazu ist hier: http://www.ourtuts.com/create-a-drop...tml5-and-css3/

Leider ist bei mir da so gut wie alles schief gelaufen; es ist nicht wirklich horizontal, klappt auch nicht aus, es wird komplett angezeigt. Start- und Stopplevel sind auf Null. Hard Limit deaktiviert.
Ich fürchte die größten Probleme liegen in der richtigen Ansprache vor allem auf level 2 und 3.
So sieht die Navi bei mir jetzt aus: Navigation.JPG
und so mein CSS:

#header .mod_navigation {
position:relative;
width:620px;
margin:0 auto;
margin-top:50px;
padding:10px;
font-family: "Verdana", "Times New Roman", "Trebuchet MS", "Palatino Linotype", sans-serif;
font-size:80%;
}

#header .mod_navigation ul {
margin:0px auto;
position:relative;
float:left;
border-left:1px solid #000000;
border-right:1px solid #000000;
}

#header .mod_navigation ul li {
display:inline;
margin:0;
padding:0;
float:left;
position:relative;
border-top:1px solid #000000;
border-bottom:2px solid #00000;
}


#header .mod_navigation ul li a {
padding:10px 25px;
color:white;
text-decoration:none;
display:inline-block;
border-right:1px solid #fff;
border-left:1px solid #C2C2C2;
border-top:1px solid #fff;
background: #719fd1;

-webkit-transition:color 0.2s linear, background 0.2s linear;
-moz-transition:color 0.2s linear, background 0.2s linear;
-o-transition:color 0.2s linear, background 0.2s linear;
transition:color 0.2s linear, background 0.2s linear;
}

#header .mod_navigation ul li a:hover {
background:#486187;
}

#header .mod_navigation ul li a.first {
border-left: 0 none;
}

#header .mod_navigation ul li a.last {
border-right: 0 none;
}

#header .mod_navigation ul li:hover > a {
background:#486187;
}

#header .mod_navigation ul li:hover > ul {
visibility:visible;
opacity:1;
}

#header .mod_navigation .level_2 ul ul {
list-style: none;
margin: 0;
padding: 0;
visibility:hidden;
opacity:0;
position: absolute;
z-index: 99999;
width:180px;
background:#f8f8f8;
box-shadow:1px 1px 3px #ccc;
/* css3 transitions for smooth hover effect */
-webkit-transitionpacity 0.2s linear, visibility 0.2s linear;
-moz-transitionpacity 0.2s linear, visibility 0.2s linear;
-o-transitionpacity 0.2s linear, visibility 0.2s linear;
transitionpacity 0.2s linear, visibility 0.2s linear;
}

#header .mod_navigation .level_2 ul ul {
top: 43px;
left: 1px;
}

#header .mod_navigation .level_2 ul ul li {
clear:both;
width:100%;
border:0 none;
border-bottom:1px solid #c9c9c9;
}

#header .mod_navigation .level_2 ul ul li a {
background:none;
padding:7px 15px;
color:#616161;
text-shadow:1px 1px 0px #fff;
text-decoration:none;
display:inline-block;
border:0 none;
float:left;
clear:both;
width:150px;
}

#header .mod_navigation .level_3 ul ul li ul {
list-style: none;
margin: 0;
padding: 0;
visibility:hidden;
opacity:0;
position: absolute;
z-index: 99999;
width:180px;
background:#f8f8f8;
box-shadow:1px 1px 3px #ccc;
/* css3 transitions for smooth hover effect */
-webkit-transitionpacity 0.2s linear, visibility 0.2s linear;
-moz-transitionpacity 0.2s linear, visibility 0.2s linear;
-o-transitionpacity 0.2s linear, visibility 0.2s linear;
transitionpacity 0.2s linear, visibility 0.2s linear;
}

#header .mod_navigation .level_3 ul ul li ul {
top: 0;
left: 181px;
}

Vielleicht hat da jemand eine IDee und kann mir rückmelden, was alles schief gelaufen ist.

VIelen Dank und LG
Lena

[stefanv]

Moin ähnlich geplagter 😉,

Versuchs mal z.b. nur mit [CODE] #header .mod_navigation .level_2{/CODE]
Sprich lösch hinter den level die ul und li.

Gruß
Stefan

[Lena1981]

Danke für den Tipp. Leider hat es mich nicht zum gewünschten Ergebnis gebracht.
Die Navigation sieht nun so aus (nachdem ich auch das width vergrößert habe), die unteren Ebenen werden gar nicht mehr angezeigt:
Navigation2.JPG

Schade, vielleicht auch noch jemand eine Idee?

Ich wünsche einen guten Start in den Tag!

[stefanv]

Na dann willkommen im Club. Habe bei mir aktuell mit der dritten Ebene das gleiche Problem...
Vieleicht findet sich ja jmd. der uns beiden helfen kann

[Lena1981]

Vieleicht findet sich ja jmd. der uns beiden helfen kann

Ja, das wäre super. Ich freue mich auch, wenn mir jemand einen Code mit ähnlicher Navigation zur Verfügung stellen kann. Farben etc. würde ich versuchen, auf meine anzupassen.

Habe bei mir aktuell mit der dritten Ebene das gleiche Problem...

Wie hast Du die zweite Ebene hinbekommen?

LG Lena

[stefanv]

Ih habe bezüglich der Funktionalität an Peter Müller und sein Buch gehalten. Der rest ist Optik.
Anbei der Code

/* ======================================
   Horizontale Navigation – Zweite Ebene
   ====================================== */

/*Ebene ausblenden*/
#header .mod_navigation .level_2 {
  width: 0;
  height: 0;
  position: absolute;
  left: -32786px;
  top: -32768px;
  overflow:hidden;
  display: inline;
}

/*Ebene bei mouseover anzeigen*/
#header .mod_navigation li:hover .level_2 {
  width: auto;
  height: auto;
  left: auto;
  top: auto;
  overflow:hidden;
  display: block;
  z-index: 1000;
}

/*Ebene design*/
#header .mod_navigation .level_2 li{
  margin-right:10px;
  border: 1px solid #89adcd;
}

#header .mod_navigation .level_2 a{
  font-weight:normal;
}

#header .mod_navigation .level_2 span.active{
  font-weight:bold;
}

#header .mod_navigation .level_2 .active,
#header .mod_navigation .level_2 .trail {
  font-weight:bold;
  color: #E2001A;
}

#header .mod_navigation .level_2 a:hover,
#header .mod_navigation .level_2 a:focus {
  font-weight:bold;
}

[pmmueller]

Zwei allgemeine kurze Hinweise:

1. Ohne einen Link zu euren Seiten wird euch niemand helfen können.
2. Schaut euch die von Contao generierte HTML-Struktur für die Navigation an und passt die Selektoren im CSS daran an.

Bei einem Selektor wie #header .mod_navigation .level_2 ul ul aus Lena's CSS komme ich ins Grübeln:
- Im Element mit id="header"
- gibt es ein Element mit class="mod_navigation"
- in dem es ein Element mit class="level_2" gibt
- in dem eine Liste ul liegt
- in der wiederum noch eine Liste ul liegt.

Wenn ich richtig mitgezählt habe ist das eine vierfache-Verschachtelung von Listen. Ich glaube nicht, dass der Selektor wirklich etwas selektiert. Und die anderen in dem Listing verschachteln noch tiefer...

[Lena1981]

Vielen Dank für Ihre Hinweise. Ich habe mich jetzt für eine Superfishnavigation (die allerdings nur funktioniert, wenn ich den Layout Builder deaktiviere, was ich eigentlich nicht will...) entschieden, weil ich das so mit den drei Ebenen nicht hinbekommen habe. "Leider" bin ich Geistes- und Sozialwissenschaftler und alles, was mit Webseitengestaltung zu tun hat, ist Neuland für mich, daher werden bei mir sicher noch einige Fragen kommen, die etwas "dumm" erscheinen werden, fürchte ich.