✔ li-Navigation mit mehreren Unterebenen

Status
Nicht offen für weitere Antworten.
H

herrgarnele

Erfahrenes Mitglied
Guten Morgen!

Ich hab ein Problem mit meiner Listennavigation.
Sie ist in der Form aufgebaut:

- Haupt 1
- Haupt 2
--- Sub 1
--- Sub 2
----- Subsub 1
----- Subsub 2
- Haupt 3

In der tiefsten Ebene ("Subsub") funktioniert meine Formatierung aber nicht mehr.
Ich habe für jede Hierarchieebene ein anderes background-image. In der dritten Ebene wird jedoch das image der zweiten Ebene angezeigt :confused:

Hier mal der Code:
Code: 
<body>
<div id="leftCol">
    <ul>
        <li><a href="#">Haupt 1</a></li>
        <li id="main_active"><a href="#">Haupt 2</a>
            <ul>
                <li><a href="#">Sub 1</a></li>
                <li id="sub_active"><a href="#">Sub 2</a>
                    <ul>
                        <li id="subsub_active"><a href="#">Subsub 1</a></li>
                        <li><a href="#">Subsub 2</a></li>
                        <li><a href="#">Subsub3</a></li>
                        <li><a href="#">Subsub 4</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Haupt 3</a></li>
        <li><a href="#">Haupt 4</a></li>
    </ul>
</div><!-- end of leftCol -->
</body>
Code: 
#leftCol {
background-color:#fff;
width:200px;
height:430px; /* for IE 5.5 and below */
he\ight:395px; /* other browsers */
float:left;
padding:35px 0 0 10px;
color:#0c3f8e;
}

#leftCol ul { /* menu */
margin:0;
padding:0;
}
#leftCol ul li {
list-style-type:none;
background:url(bullet_big.gif) 0px 1px no-repeat;
margin:0 0 4px 0;
padding:0 0 0 20px;
}
#leftCol ul li#main_active {
background:url(bullet_big_active.gif) 0px 1px no-repeat;
font-weight:bold;
}
#leftCol ul li ul { /* submenu */
margin:4px 0 20px 0;
}
#leftCol ul li ul li{
list-style-type:none;
background:url(bullet_small.gif) 0px 3px no-repeat !important;
background:url(bullet_small.gif) 0px 4px no-repeat;
margin:0;
padding:0 0 0 18px;
font-size:9px;
font-weight:normal;
}
#leftCol ul li ul li#sub_active {
background:url(bullet_small_active.gif) 0px 3px no-repeat !important;
background:url(bullet_small_active.gif) 0px 4px no-repeat;
font-weight:bold;
}
#leftCol ul li ul li ul { /* sub-submenu */
margin:0 0 20px 0;
}
#leftCol ul li ul li ul li {
 background:url(bullet_smallest.gif) 0px 3px no-repeat;
margin:0;
padding:0 0 0 14px;
}
#leftCol ul li ul li ul li#subsub_active {
font-weight:bold;
}
Direkt zum Anschauen hier: http://www.2klang.net/_temp/naviTest.html

Danke schonmal!!
 
Hallo,
... und was passiert, wenn du die !important-Erweiterung aus dem LI-Selektor eine Ebene höher herausnimmst?
 
Hi,

ich komme da zum gleichen Resultat wie hela:

Code: 
#leftCol ul li ul li{
list-style-type:none;
/*background:url(bullet_small.gif) 0px 3px no-repeat !important;*/ /* auskommentiert = deaktiviert */
background:url(bullet_small.gif) 0px 4px no-repeat;
margin:0;
padding:0 0 0 18px;
font-size:9px;
font-weight:normal;
}
Das Auskommentieren der ersten background-Angabe mit der !important-Regel behebt den Fehler in den modernen Browsern.

Da sich die !important-Regel auf die Hintergrundpositionierung bezieht, könntest du die Regel auch so umformulieren:

Code: 
#leftCol ul li ul li{
list-style-type:none;
background:url(bullet_small.gif) no-repeat;
background-position: 0 3px !important;
background-position: 0 4px;
margin:0;
padding:0 0 0 18px;
font-size:9px;
font-weight:normal;
}
Oder du verzichtest auf die !important-Regel und setzt stattdessen für den IE einen "Conditional Comment" ein, um für ihn die erforderlichen Korrekturen vorzunehmen.
 
Hela, Michael,
vielen Dank!!

Ich bin da schon ne ganze Weile drüber verzweifelt. Und ich glaube, da wäre ich auch noch ne ganze Weile nicht drauf gekommen..

Wie immer wunderbar schnell & kompetent geholfen - Dank!!
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück