# Der Z-Index und der Internet Explorer



## ne0hype (7. November 2010)

Hallo Community,

ich bin ratlos !

Folgendes Problem tritt im Internet Explorer auf:

Ich habe eine Liste die "gefloatet" ist. Nun möchte ich ein <span> Objekt, das in einem <li> Eingebunden ist über die anderen Listen darüberlegen.

Ich denke anhand eines Beispiel wird es deutlicher.

CSS:

```
body { padding: 0; margin: 0; text-align: center; } 
    
    
	#navigationWrapper {
        color:      #333;
        font-family:Verdana,Arial,sans-serif;
        font-size:  12px;
        font-weight:bold;
        width:      952px;
        margin:     0px auto 0px;
	}
    
    #navigation ul,
    #navigation li {
        position:   relative;
        padding:    0px;
        margin:     0px;
    }
    
    #navigation ul li {
        position:   relative;        
        list-style: none;
        float:      left;
        width:      190px;
        background: url("/images/navigation/background.png") repeat-x right;
        text-align: center;
    }
    #navigation ul li.navigationLast {
        background: url("/images/navigation/background-last.png");
    }
    #navigation ul li a {
        color:      #fff;
        display:    block;
        padding:    10px 0;
    }
    #navigation ul li:hover {
        background: url("/images/navigation/background-hover.png") repeat-x;
    }
    
    
    
    #subNavigation {
        position:   absolute;
        height:     500px;
        width:      948px;
        border-left:2px solid #252525;
        border-right:2px solid #252525;
        border-bottom:2px solid #252525;
        background: url("/images/navigation/sub-background.png") repeat;
        margin-top: 136px;
    }
     
    #navigation a.activ .path {
        display: block;
        position: absolute;
        height: 100px;
        width: 100%;
        left: 0px;
        top: 34px;
        background-color: rgb(189, 0, 0);
        z-index: 999;
    }
```

HTML:

```
<div id="navigationWrapper">

    <div id="navigation">
        <ul>
            <li data-catid="353" class="navigationLast">
                            <a title="Werbeklassiker" href="/werbeklassiker-c-353.html" class="">
                                <span class="path"></span>
                                <span>Werbeklassiker</span>
                            </a>
                    </li><li data-catid="172" class="">
                            <a title="Brauereien" href="/brauereien-c-172.html" class="">
                                <span class="path"></span>
                                <span>Brauereien</span>
                            </a>
                    </li><li data-catid="321" class="">
                            <a title="Swissness" href="/swissness-c-321.html" class="">
                                <span class="path"></span>
                                <span>Swissness</span>
                            </a>
                    </li><li data-catid="350" class="">
                            <a title="Swiss Made" href="/swiss-made-c-350.html" class="">
                                <span class="path"></span>
                                <span>Swiss Made</span>
                            </a>
                    </li><li data-catid="351" class="navigationLast">
                            <a title="Wellness &amp; Kosmetik" href="http://www.showtechnik-kleinanzeiger.de/wellness-kosmetik-c-351.html" class="">
                                <span class="path"></span>
                                <span>Wellness &amp; Kosmetik</span>
                            </a>
                    </li><li data-catid="352" class="">
                            <a title="Eco &amp; Energiesparen" href="/eco-energiesparen-c-352.html" class="">
                                <span class="path"></span>
                                <span>Eco &amp; Energiesparen</span>
                            </a>
                    </li><li data-catid="355" class="">
                            <a title="Uhren &amp; Wetter" href="/uhren-wetter-c-355.html">
                                <span class="path"></span>
                                <span>Uhren &amp; Wetter</span>
                            </a>
                    </li><li data-catid="356" class="">
                            <a title="Computerartikel" href="/computerartikel-c-356.html" class="">
                                <span class="path"></span>
                                <span>Computerartikel</span>
                            </a>
                    </li><li data-catid="357" class="navigationLast">
                            <a title="Markenartikel" href="/markenartikel-c-357.html">
                                <span class="path"></span>
                                <span>Markenartikel</span>
                            </a>
                    </li><li data-catid="358" class="">
                            <a title="Textilien" href="/textilien-c-358.html">
                                <span class="path"></span>
                                <span>Textilien</span>
                            </a>
                    </li><li data-catid="359" class="">
                            <a title="Indoor" href="/indoor-c-359.html" class="">
                                <span class="path"></span>
                                <span>Indoor</span>
                            </a>
                    </li><li data-catid="360" class="">
                            <a title="Taschen &amp; Rucksäcke" href="/taschen-rucksaecke-c-360.html">
                                <span class="path"></span>
                                <span>Taschen &amp; Rucksäcke</span>
                            </a>
                    </li><li data-catid="361" class="navigationLast">
                            <a title="Sport-&amp; Fanartikel" href="/sport-fanartikel-c-361.html" class="">
                                <span class="path"></span>
                                <span>Sport-&amp; Fanartikel</span>
                            </a>
                    </li><li data-catid="362" class="">
                            <a title="Auto &amp; Reisen" href="/auto-reisen-c-362.html">
                                <span class="path"></span>
                                <span>Auto &amp; Reisen</span>
                            </a>
                    </li><li data-catid="363" class="">
                            <a title="Outdoor" href="/outdoor-c-363.html">
                                <span class="path"></span>
                                <span>Outdoor</span>
                            </a>
                    </li><li data-catid="364" class="">
                            <a title="Büro &amp; Office" href="/buero-office-c-364.html" class="">
                                <span class="path"></span>
                                <span>Büro &amp; Office</span>
                            </a>
                    </li><li data-catid="365" class="navigationLast">
                            <a title="Testkategorie 1" href="/testkategorie1-c-365.html">
                                <span class="path"></span>
                                <span>Testkategorie 1</span>
                            </a>
                    </li>        </ul>
    
    </div>
    
    <div id="subNavigation">
    
    </div>

</div>
```

Noch ein bisschen Javascript

```
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {


    $("#navigation ul li").hover(function(){
         $('a',this).addClass('activ');
    },
    function(){
         $('a', this).removeClass('activ');
    });

});	
</script>
```

Im Firefox wird der rote <span>- Block über allen Listenelementen angezeigt. im Internet Explorer nicht.

Weiß jemand Rat?

Danke


----------



## SpiceLab (7. November 2010)

ne0hype hat gesagt.:


> Weiß jemand Rat?


Im Moment nicht, weil du den hiesigen Sticky-Thread nicht beachtet hast.

*Wichtig:* Bei CSS-Problemen mit dem IE bitte die Version angeben


----------



## ne0hype (7. November 2010)

spicelab hat gesagt.:


> Im Moment nicht, weil du den hiesigen Sticky-Thread nicht beachtet hast.
> 
> *Wichtig:* Bei CSS-Problemen mit dem IE bitte die Version angeben



Alle !
6 <= IE <= 8


----------



## SpiceLab (7. November 2010)

ne0hype hat gesagt.:


> Im Firefox wird der rote <span>- Block über allen Listenelementen angezeigt. im Internet Explorer nicht.





ne0hype hat gesagt.:


> Alle !
> 6 <= IE <= 8


Ich kann zwischen FF und IE7/8  keinen Unterschied registrieren.

Na, und der arme IE6 versucht sich seither noch immer daran, deinen Code fertiggeladen zu bekommen :suspekt:


----------



## ne0hype (7. November 2010)

Wie kein Unterschied?

Im Firefox ist der rote <span> Block über den LIs (also der Text verdeckt). Im IE ist der Text weiterhin sichtbar.


----------



## SpiceLab (7. November 2010)

Sorry, mein Fehler im Falle des IE7 :-(

Beim IE8 bleibst aber bei meiner Aussage


----------



## SpiceLab (7. November 2010)

Soviel kann ich dir (ver)raten: wenn die absolute Positionierung der <span>-Elemente sich nicht auf ihr unmittelbares Elternelement <li>, sondern auf das Großelternelement <ul> bezieht, folgen auch die übrigen IE-Mitglieder deinen Vorstellungen.

Diese Herangehensweise hat zur Folge, dass für jedes <span> (per ID-Bezeichner) eine gesonderte *top* und *left*-Regel aufzustellen ist, wenn sie nicht alle am selben Fleck erscheinen sollen, denn ihr neuer Bezugspunkt verhält sich dagegen statisch, durchläuft nicht mit ihnen gemeinsam das Dokument.


----------



## ne0hype (7. November 2010)

Also bei mir ist im IE 8 genau das gleiche Problem wie im 6er oder 7er. 

Die Positionierung des SPANs soll ich auf das LI Element beziehen, deshalb ist dieses auch position: relative.

Also positioniere ich das SPAN Element relativ zum LI Element. Das ist soweit kein Problem. Das Problem ist dass das SPAN Element obwohl es einen z-index von 9999 hat immer noch hinter den LI Element angezeigt wird (siehe Bild).


----------



## SpiceLab (7. November 2010)

Jo, und genau diese Vorgehensweise ist hier das Problem - zumindest im IE 

Seine Lösung kennst du.


----------



## ne0hype (7. November 2010)

Ja das ist keine befriedigende Lösung.

Was ist das eigentliche Problem? Erkennt der IE den Z-index nicht ausserhalb des LI Elements?


----------



## SpiceLab (7. November 2010)

Du hast um Rat gefragt, und ihn erhalten. Ob er dich befriedigt, war hier nicht Gegenstand der Lösungsfindung.

Das eigentliche Problem kannst du aus dem ersten Absatz im Kapitel zur z-index-Eigenschaft ableiten, der die Gesetzmäßigkeiten der Schichtposition mehrerer aufeinanderfolgenden Elementen umschreibt.

Dort wo bei dir "Box1" für den Verweis "Werbeklassiker" angezeigt werden soll, befinden sich in den Zeilen darunter die <li>-Elementen schon in einer deutlich höheren Schichtposition gegenüber dem allerersten <li>-Element, und gewisse IE-Versionen gewähren dem Kindelement gegenüber seinem unmittelbaren Elternelement keinen höheren z-index-Wert.

Fertitsch.


----------



## ne0hype (7. November 2010)

Also ist das Problem das, dass der IE dem Kindelement keinen höheren z-index gewährt als das Elternteil besitzt. Ich komm somit nicht über das Elternelement hinaus.

Umständlich aber ok.


Ich habs nun so geöst:

CSS:

```
<style type="text/css">
<!--
    body { padding: 0; margin: 0; text-align: center; } 
    
    
	#navigationWrapper {
        color:      #333;
        font-family:Verdana,Arial,sans-serif;
        font-size:  12px;
        font-weight:bold;
        width:      952px;
        margin:     0px auto 0px;
        position:   relative;
	}
    
    #navigation ul,
    #navigation li {
        padding:    0px;
        margin:     0px;
    }
    
    #navigation ul li {
        position:   relative;     
        list-style: none;
        float:      left;
        width:      190px;
        background: url("/images/navigation/background.png") repeat-x right;
        text-align: center;
    }
    #navigation ul li.navigationLast {
        background: url("/images/navigation/background-last.png");
    }
    #navigation ul li a {
        color:      #fff;
        display:    block;
        padding:    10px 0;
    }
    #navigation ul li.navigationHover {
        background: url("/images/navigation/background-hover.png") repeat-x;
    }
    
    
    
    #navigation a.activ .path {
        /*display: block;*/
        position: absolute;
        width: 100%;
        left: 0px;
        top: 34px;
        background-color: rgb(189, 0, 0);
        z-index: 999;
    }
    
    #subNavigation {
        display:    none;
        position:   absolute;
        height:     500px;
        width:      948px;
        border-left:2px solid #252525;
        border-right:2px solid #252525;
        border-bottom:2px solid #252525;
        /*background: url("/images/navigation/sub-background.png") repeat;*/
        background-color:  #BD0000; 
        margin-top: 136px;
        top: 0px;
        left: 0px;
    }
    
    #subNavigation .subNavigationCategoryContainer {
        display:    none;
        text-align: left;
    }
    
    #subNavigation .subCategories {
        float: left;
        height: 200px;
        border-right: 1px solid #000;
        width: 200px;
    }
    

-->
</style>


<!--[if IE]>
    <style type="text/css">@import url(ie.css);</style>
<![endif]-->
```

Wobei ie.css


```
#navigation ul li {
        list-style: none;
        width:      190px;
        background: url("/images/navigation/background.png") repeat-x right;
        text-align: center;
        float: left;
        position: static;
    }
```


Noch ein bisschen JS


```
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function() {

    var rowHeight = {
        'firstRow': '102px',
        'secondRow':    '68px',
        'thirdRow':    '34px'
    }


    $("#navigation ul li").hover(function(){
        //Position des LI Elements
        var position = $(this).position();
        //alert("left: " + position.left + ", top: " + position.top)
        
        //Rest
        $('div.subNavigationCategoryContainer').css("display", "none");
        $('#navigation ul li a').removeClass('activ');
        $('#navigation ul li').removeClass('navigationHover');
        
        //Hovereffekt
        $(this).addClass('navigationHover');
        
        //HTML 5 Data "row" für spätere Anzeige der Kategorie
        var row = $(this).data('row');
        
        //Das SPAN path Element
        $pathObj = $('a',this).addClass('activ').find('span.path')
        
        // Browserweiche IE und Andere
        if($.browser.msie){
            $pathObj.css(
            {
                'position': 'absolute',
                'height': rowHeight[row],
                'left': position.left+'px',
                'top': (position.top+34)+'px'
            });
        }else{
            $pathObj.css(
            {
                'position': 'absolute',
                'height': rowHeight[row]
            });
        }
                    
        //Zeige Subnavi
        $('#subNavigation').css("display", "block");
         
        //Zeige Subcategorien in der Subnavi
        var catID = $(this).data('catID');
        $('#category_'+catID).css("display", "block");
         
    },
    function(){
        //$('a', this).removeClass('activ');
    });
    

    $('#navigationWrapper').mouseleave(function() {
        $('#subNavigation').css("display", "none");
        $('#navigation ul li a').removeClass('activ');
        $('#navigation ul li').removeClass('navigationHover');
    });


});	
</script>
```


HTML

```
<div id="navigationWrapper">

    <div id="navigation">
        <ul style="position: relative;">
            <li data-catid="362" data-row="firstRow" class="">
                            <a title="Auto &amp; Reisen" href="#">
                                <span class="path"></span>
                                <span>Auto &amp; Reisen</span>
                            </a>
                    </li><li data-catid="172" data-row="firstRow" class="">
                            <a title="Brauereien" href="#">
                                <span class="path"></span>
                                <span>Brauereien</span>
                            </a>
                    </li><li data-catid="364" data-row="firstRow" class="">
                            <a title="Büro &amp; Office" href="#">
                                <span class="path"></span>
                                <span>Büro &amp; Office</span>
                            </a>
                    </li><li data-catid="356" data-row="firstRow" class="">
                            <a title="Computerartikel" href="#">
                                <span class="path"></span>
                                <span>Computerartikel</span>
                            </a>
                    </li><li data-catid="352" data-row="firstRow" class="navigationLast">
                            <a title="Eco &amp; Energiesparen" href="#">
                                <span class="path"></span>
                                <span>Eco &amp; Energiesparen</span>
                            </a>
                    </li><li data-catid="359" data-row="secondRow" class="">
                            <a title="Indoor" href="#">
                                <span class="path"></span>
                                <span>Indoor</span>
                            </a>
                    </li><li data-catid="357" data-row="secondRow" class="">
                            <a title="Markenartikel" href="#" class="">
                                <span class="path" style="position: absolute; height: 68px;"></span>
                                <span>Markenartikel</span>
                            </a>
                    </li><li data-catid="363" data-row="secondRow" class="">
                            <a title="Outdoor" href="#">
                                <span class="path"></span>
                                <span>Outdoor</span>
                            </a>
                    </li><li data-catid="361" data-row="secondRow" class="">
                            <a title="Sport-&amp; Fanartikel" href="#">
                                <span class="path"></span>
                                <span>Sport-&amp; Fanartikel</span>
                            </a>
                    </li><li data-catid="350" data-row="secondRow" class="navigationLast">
                            <a title="Swiss Made" href="#">
                                <span class="path"></span>
                                <span>Swiss Made</span>
                            </a>
                    </li><li data-catid="321" data-row="thirdRow" class="">
                            <a title="Swissness" href="#" class="">
                                <span class="path" style="position: absolute; height: 34px;"></span>
                                <span>Swissness</span>
                            </a>
                    </li><li data-catid="360" data-row="thirdRow" class="">
                            <a title="Taschen &amp; Rucksäcke" href="#" class="">
                                <span class="path" style="position: absolute; height: 34px;"></span>
                                <span>Taschen &amp; Rucksäcke</span>
                            </a>
                    </li><li data-catid="358" data-row="thirdRow" class="">
                            <a title="Textilien" href="#">
                                <span class="path"></span>
                                <span>Textilien</span>
                            </a>
                    </li><li data-catid="355" data-row="thirdRow" class="">
                            <a title="Uhren &amp; Wetter" href="#">
                                <span class="path"></span>
                                <span>Uhren &amp; Wetter</span>
                            </a>
                    </li><li data-catid="351" data-row="thirdRow" class="navigationLast">
                            <a title="Wellness &amp; Kosmetik" href="#">
                                <span class="path"></span>
                                <span>Wellness &amp; Kosmetik</span>
                            </a>
                    </li><li data-catid="353" data-row="" class="">
                            <a title="Werbeklassiker" href="#" class="">
                                <span class="path" style="position: absolute;"></span>
                                <span>Werbeklassiker</span>
                            </a>
                    </li><li data-catid="365" data-row="" class="">
                            <a title="Testkategorie 1" href="#">
                                <span class="path"></span>
                                <span>Testkategorie 1</span>
                            </a>
                    </li>        </ul>    
    </div>
    
    <div id="subNavigation" style="display: none;">
    
        <div id="category_362" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>Autozubehör</h3><ul><li>Eiskratzer</li><li>Erste Hilfe</li><li>Parkscheibe</li><li>Sonnenblende</li></ul></div><div class="subCategories"><h3>Reisen</h3><ul><li>Diverse Reiseartikel</li><li>Kofferanhänger</li><li>Manikürset</li><li>Reisespiele</li><li>Reisetaschen</li><li>Reisewecker</li><li>Toilettenbag</li></ul></div></div><div id="category_172" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>Aufblasbare Artikel</h3><ul></ul></div><div class="subCategories"><h3>Bierdeckelhalter</h3><ul></ul></div><div class="subCategories"><h3>Diverse Artikel</h3><ul></ul></div><div class="subCategories"><h3>Flaschenhalter</h3><ul></ul></div><div class="subCategories"><h3>Flaschenöffner</h3><ul></ul></div><div class="subCategories"><h3>Kugelschreiber Extra</h3><ul></ul></div><div class="subCategories"><h3>Kühltaschen</h3><ul></ul></div><div class="subCategories"><h3>Mini-Truck's</h3><ul></ul></div><div class="subCategories"><h3>Taschen Offset</h3><ul></ul></div><div class="subCategories"><h3>Untersetzer aus Blech</h3><ul></ul></div><div class="subCategories"><h3>Würfelspiele</h3><ul></ul></div></div><div id="category_364" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>Büro</h3><ul><li>Haftis</li><li>Magnete</li><li>Schreibboard</li></ul></div><div class="subCategories"><h3>Handyhalter</h3><ul></ul></div><div class="subCategories"><h3>Pharma</h3><ul></ul></div><div class="subCategories"><h3>Pins</h3><ul></ul></div><div class="subCategories"><h3>Schreibmappen</h3><ul></ul></div><div class="subCategories"><h3>Süsse Werbung</h3><ul></ul></div><div class="subCategories"><h3>Taschenrechner</h3><ul></ul></div></div><div id="category_356" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>CD-Halter + Box</h3><ul></ul></div><div class="subCategories"><h3>Digitale Bilderrahmen</h3><ul></ul></div><div class="subCategories"><h3>Laserpointer</h3><ul></ul></div><div class="subCategories"><h3>MP3 + MP4 Player</h3><ul></ul></div><div class="subCategories"><h3>USB Diverse</h3><ul></ul></div><div class="subCategories"><h3>USB Stick</h3><ul></ul></div></div><div id="category_352" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>Energie</h3><ul></ul></div><div class="subCategories"><h3>Holz Oeko Umwelt</h3><ul></ul></div><div class="subCategories"><h3>Werben + Wachsen (Pflanzen)</h3><ul></ul></div></div><div id="category_359" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>Haushalt</h3><ul><li>Barzubehör</li><li>Frischhalteboxen</li></ul></div><div class="subCategories"><h3>Lampen + Licht</h3><ul></ul></div><div class="subCategories"><h3>Logo-Toaster</h3><ul></ul></div><div class="subCategories"><h3>Radios</h3><ul></ul></div><div class="subCategories"><h3>Sandwich Maker</h3><ul></ul></div><div class="subCategories"><h3>Spiel + Spass</h3><ul><li>Brettspiele</li><li>Fresbee + Bumerang</li><li>Geduldspiele</li><li>Jojos</li><li>Kartenspiele</li><li>Reisespiele</li></ul></div><div class="subCategories"><h3>Thermosflaschen</h3><ul></ul></div><div class="subCategories"><h3>Wein</h3><ul></ul></div><div class="subCategories"><h3>Werkzeug</h3><ul></ul></div></div><div id="category_357" class="subNavigationCategoryContainer" style="display: block;"><div class="subCategories"><h3>Switcher</h3><ul></ul></div></div><div id="category_363" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>Aufblasbare Artikel</h3><ul></ul></div><div class="subCategories"><h3>Holzliegestuhl &amp; andere</h3><ul><li>Alu Liegestuhl</li><li>Beanbag</li><li>Diverse</li><li>Holzliegestühle</li><li>Regiestühle</li><li>Strandkörbe</li></ul></div><div class="subCategories"><h3>Outdoor</h3><ul><li>Drachen</li><li>Einweg-Camera</li><li>Ferngläser</li><li>Grillen + Picknick</li><li>Kühltaschen</li><li>Strandzelte</li><li>Trinkflaschen</li><li>Wasser + Strand</li></ul></div><div class="subCategories"><h3>Sicherheit</h3><ul></ul></div><div class="subCategories"><h3>Taschenmesser</h3><ul></ul></div></div><div id="category_361" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>Fanartikel Fussball WM 2010</h3><ul></ul></div><div class="subCategories"><h3>Fussballkasten</h3><ul></ul></div><div class="subCategories"><h3>Golf</h3><ul></ul></div><div class="subCategories"><h3>Schlitten und Rodel</h3><ul></ul></div></div><div id="category_350" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>Armbanduhren Swiss Made</h3><ul></ul></div><div class="subCategories"><h3>Taschenmesser Wenger</h3><ul></ul></div></div><div id="category_321" class="subNavigationCategoryContainer" style="display: none;"></div><div id="category_360" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>Einkaufstaschen</h3><ul><li>Baumwolltaschen</li><li>Nylontaschen</li><li>PVC Tragtaschen</li><li>Vliestaschen</li></ul></div><div class="subCategories"><h3>Taschen</h3><ul><li>Bodybag</li><li>Business</li><li>Matchsäcke</li><li>Reisen</li><li>Rucksäcke + Citybag's</li><li>Shopper-Bag's</li><li>Sport + Freizeit</li><li>Taschen im Offsetdruck</li></ul></div></div><div id="category_358" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>Aufnäher</h3><ul></ul></div><div class="subCategories"><h3>Badetücher</h3><ul></ul></div><div class="subCategories"><h3>Caps + Mützen</h3><ul><li>Caps Fernost</li><li>Caps Lager</li><li>Diverse</li><li>Hüte</li><li>Mützen</li></ul></div><div class="subCategories"><h3>Fleece</h3><ul></ul></div><div class="subCategories"><h3>Funktions Lauf-Shirt</h3><ul></ul></div><div class="subCategories"><h3>Funktions-Shirt</h3><ul></ul></div><div class="subCategories"><h3>Jacken</h3><ul></ul></div><div class="subCategories"><h3>Radfahrer-Dress</h3><ul></ul></div><div class="subCategories"><h3>Radfahrer-Hose</h3><ul></ul></div><div class="subCategories"><h3>T-Shirt</h3><ul><li>Fruit of the Loom</li><li>Gildan</li><li>Hanes</li><li>Promodoro</li><li>Switcher</li><li>US Basic</li><li>Whale</li></ul></div></div><div id="category_355" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>Funkuhren</h3><ul></ul></div><div class="subCategories"><h3>Tischuhren</h3><ul></ul></div><div class="subCategories"><h3>Wanduhren</h3><ul></ul></div><div class="subCategories"><h3>Wetterstationen</h3><ul></ul></div></div><div id="category_351" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>Düfte</h3><ul></ul></div><div class="subCategories"><h3>Lipcare</h3><ul></ul></div><div class="subCategories"><h3>Wellness + Fitness</h3><ul></ul></div></div><div id="category_353" class="subNavigationCategoryContainer" style="display: none;"><div class="subCategories"><h3>Feuerzeuge</h3><ul><li>Grill-Feuerzeuge</li><li>Kunststoff-Feuerzeuge</li><li>Marken-Feuerzeuge Kunststoff</li><li>Marken-Feuerzeuge Metal</li><li>Metall-Feuerzeuge</li></ul></div><div class="subCategories"><h3>Kaffeebecher</h3><ul></ul></div><div class="subCategories"><h3>Kalender</h3><ul></ul></div><div class="subCategories"><h3>Kugelschreiber</h3><ul><li>Kugelschreiber Kunststoff</li><li>Kugelschreiber Metall</li></ul></div><div class="subCategories"><h3>Kunststoffbecher</h3><ul></ul></div><div class="subCategories"><h3>Schirme</h3><ul><li>Automathik-Schirme</li><li>Fiberglas-Schirme</li><li>Golf-Schirme</li><li>Holzstock-Schirme</li><li>Knirps-Schirme</li><li>Original Knirps Schirme</li><li>Portier-Schirme</li></ul></div><div class="subCategories"><h3>Schlüsselanhänger</h3><ul><li>Schlüsselanhgänger mit Einkaufsw</li><li>Schlüsselanhänger Kristall</li><li>Schlüsselanhänger Kunststoff</li><li>Schlüsselanhänger Licht</li><li>Schlüsselanhänger Metall</li><li>Schlüsselanhänger Soft</li><li>Schlüsselanhänger-Set</li><li>Schlüsselbänder</li></ul></div><div class="subCategories"><h3>Schreibgeräte</h3><ul><li>Druckbleistifte</li><li>Füllfederhalter</li><li>Kugelschreiber</li><li>Metalkugelschreiber</li><li>Rollerball und Finliner</li><li>Schreibsets</li><li>Textmarker</li><li>Etuis/Verpackung</li></ul></div><div class="subCategories"><h3>Tassen</h3><ul></ul></div><div class="subCategories"><h3>Zündhölzer</h3><ul><li>Zahnstocker</li><li>Zündholzbriefchen</li><li>Zündholzbriefchen Sonderformen</li><li>Zündholzschachteln</li><li>Zündholzschachteln Sonderformen</li></ul></div></div><div id="category_365" class="subNavigationCategoryContainer" style="display: none;"></div>        
    </div>

</div>
```


----------

