Erste Ebene vertikal, 2. Ebene horizontal
Hallo.
Ich bin gerade dabei eine Navigation zu erstellen, welche das erste Level der Navigation vertikal darstellen soll und die 2. Ebene horizontal zum dazugehörigen vertikalen Navigationspunkt.
Bei den Modul-Einstellungen habe ich das Stoplevel auf 1 gestellt, sodass mir die erste Ebene ausgegeben wird und bei einem active Status auch die 2. ebene.
mein css sieht folgender maßen aus:
HTML-Code:
#nav_main {
position:absolute;
margin-left:165px;
}
#nav_main ul {
margin:0;
}
#nav_main li {
margin-bottom:5px;
margin-left:5px;
background-image:url(buttons/button.png);
}
#nav_main .level_2 li { background:url(buttons/button_blue.png); }
#nav_main a {
display:block;
text-indent:-9999em;
width:94px;
height:94px;
}
#nav_main .level_1 .active { float:left; }
#nav_main .level_1 .trail { float:left; }
#nav_main .level_2 li { float:left; }
#nav_main ul li {
background-position:0 0;
background-repeat:no-repeat;
}
Doch meine Darstellung klappt überhaupt nicht ...
Sie sieht folgendermaßen aus:
http://imageshack.us/photo/my-images/231/navcl.png/
Und wenn ein anderer Menüpunkt active ist so:
http://imageshack.us/photo/my-images/215/nav2m.png/
Liste der Anhänge anzeigen (Anzahl: 1)
Hi an alle,
was ist denn hier los? Es ist das erste Mal, dass ich in diesem Forum erlebe, dass richtig gefightet wird.
Ich habe den Thread von bluuba gestern gelesen und wollte eigentlich schnell antworten, weil ich meinte, dass ul.level_1 ein width braucht. Da aber bereits heftig diskutiert wurde, wollte ich sicher gehen und hab das Menü nachgebaut - siehe Anhang.
In meiner Lösung wird kein clear:both gebraucht.
Alle li bzw. a haben float:left.
.level_1 bekommt ein width:94px, so dass der float hier einen Zeilenumbruch bewirkt
Code:
.main_nav {
margin:0 0 0 160px;
padding:20px 0 0 0;
width: auto;
}
.main_nav .level_1 {width:94px;}
.main_nav ul li a,
.main_nav .active span {
background: #b20000;
color: #fff;
display: block;
height: 94px;
line-height: 94px;
width: 94px;
padding-left: 10px;
text-decoration: none;
/*text-indent:-9999em;*/
}
.main_nav .active span {
background: #888;
}
.main_nav ul li ul li a,
.main_nav ul li.trail a{
background: #600000;
}
.main_nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.main_nav ul li {
margin:0 0 5px 0;
float: left;
position: relative;
}
.main_nav ul li ul li{
margin:0 0 0 5px;
}
.main_nav ul li ul {
display: none;
}
.main_nav ul li.active ul,
.main_nav ul li.trail ul {
background:#ddd;
display: block;
left: 104px;
position: absolute;
top: 0;
width:350px;
}
.main_nav ul li:hover ul li {
float: left;
}
.main_nav ul li:hover ul li a {
background: #600000;
color: #fff;
display: block;
float: left;
width: 94px;
}
.main_nav ul li a:hover,
.main_nav ul li ul li a:hover {
background: #BBBB99;
color: #000;
}
Evtl. kann man den Code an der einen oder anderen Stelle noch bereinigen, das hab ich mir erspart. Tatsache ist aber, dass es funktioniert im:
Firefox 4
Opera 11
Chrome 11
sogar im IE6 (andere IEs habe ich grad nicht zur Verfügung)
