Liste der Anhänge anzeigen (Anzahl: 1)
Probleme mit Navigation
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: Anhang 15261
und so mein CSS:
Zitat:
#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-transition:opacity 0.2s linear, visibility 0.2s linear;
-moz-transition:opacity 0.2s linear, visibility 0.2s linear;
-o-transition:opacity 0.2s linear, visibility 0.2s linear;
transition:opacity 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-transition:opacity 0.2s linear, visibility 0.2s linear;
-moz-transition:opacity 0.2s linear, visibility 0.2s linear;
-o-transition:opacity 0.2s linear, visibility 0.2s linear;
transition:opacity 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
Liste der Anhänge anzeigen (Anzahl: 1)
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:
Anhang 15262
Schade, vielleicht auch noch jemand eine Idee?
Ich wünsche einen guten Start in den Tag!