Guten Tag liebe Community,
Ich habe mir eine Multi Level Dropline Navigation auf : http://www.cssplay.co.uk/menus/ angesehen.
Wurde dort ebenfalls fündig. Dennoch war diese Dropline Navigation dort nicht in das Center gesetzt.
Nun habe Ich Sie soweit auf meine Bedürfnisse Angepasst :
- 100% Breite Hinzugefügt.
- Background Ebenen editiert.
- Die Schritte zur dritten Navigation entfernt.
Dennoch stehe Ich vor einem Problem. Un zwar soll die Untere Navigations Ebene ( Dropline ) erst angezeigt werden, wenn über den ersten Navigationspunkt Gehovert wird.
Dies tut es auch dank folgenden Css Einstellungen :
#Mainnavigation li ul{ position:absolute;
top:42px;
left:-9999px;
}
#Mainnavigation :hover ul{
left:0;
width:100%;
height:31px;
background:#b9babc;
opacity:0.72;
z-index:6;
}Nun kommt dennoch das Problem auf, dass mein Code bezüglich des Befehles :
.Centered{
width:1000px;
margin:0 auto;
}nicht funktionieren will. Die Obere Navigation setzt er ins Center.
Die untere dennoch nicht! Sobald Ich versuche nun unten nochmals den .Centered Befehl einzubringen, stellt sich der Code dank Mainnavigation :hover ul schräg und erstellt 2 Subnavigationen.
Was natürlich ebenfalls nicht mein Ziel ist. Soweil Ich dies mit <li></li> versuche funktioniert es nicht.
Hier das Live Beispiel :
http://my-alina.de/anpassung/1/Sitrion.html
Hier nochmals der Code der Navigation :
Html Code :
<ul id="Navigation">
[COLOR=#ff0000]<ul class="Centered">[/COLOR]
<ul id="Mainnavigation">
<li><a class="Mainnavigation-Punkte" href="#">What we do</a>
<ul class="Subnavigation">
[COLOR=#0000ff]<ul class="Centered">[/COLOR]
<li><a href="#" class="Subnavigation-Punkte">Why us?</a></li>
[COLOR=#0000ff]</ul>[/COLOR]
</ul>
</li>
</ul>
[COLOR=#ff0000] </ul>[/COLOR]
</ul>Centered Rot markiert, zweite Centered blau markiert.
Css Code :
.Centered{
width:1000px;
margin:0 auto;
}
ul{
margin:0px;
padding:0px;
list-style:none;
}
li{
float:left;
height:42px;
}
#Navigation{
width:100%;
height:42px;
background:#d0d2d4;
position:relative;
}
#Mainnavigation{
width:1000px;
float:left;
display:block;
line-height:42px;
margin-left:219px;
}
.Mainnavigation-Punkte{
padding:0 15px 0 15px;
font-family:arial;
font-size:14px;
color:#4e5059;
height:42px;
text-decoration:none;
}
.Mainnavigation-Punkte:hover{
color:#79844f;
}
.Subnavigation{
float:left;
display:block;
line-height:31px;
padding-left:227px;
}
.Subnavigation-Punkte{
font-family:arial;
font-size:12px;
color:#4e5059;
float:left;
text-decoration:none;
padding:0 10px 0 10px;
}
.Subnavigation-Punkte:hover{
font-weight:bold;
position:absolute;
}
#Mainnavigation li ul{
position:absolute;
top:42px;
left:-9999px;
}
#Mainnavigation :hover ul{
left:0;
width:100%;
height:31px;
background:#b9babc;
opacity:0.72;
z-index:6;
}Hoffe Ihr könnt mir hierbei helfen.
Freundliche Grüße
Azr