Dropdown Navigation über Header anzeigen lassen

enjoyHB · 06.10.2016

Hallo liebe Community,
ich habe ein Problem das mich verrückt macht :=)

Ich habe eine simple Dropdown-Navigation gebaut. Unter der Dropdown Navigation befindet sich ein Header. Der Header wird mit einem background image gefüllt.

Nun passiert folgendes Problem:
Der aufgeklappte Teil der Dropdown Navigation legt sich unter den Header. Ich verstehe leider nicht wieso und finde daher keinen Lösungsansatz

Ich habe das ganze einmal hochgeladen:

Hier der Code für den Header:

CSS:

#teaser {
    background-image: url("header.jpg");
    background-position: 80% 80%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height:460px;
    z-index: -1;
}

Code für die Navigation:

CSS:

nav {
    width: 100%;
    background-color: #f6f6f6;
    margin: 0;
    padding: 0;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

nav li {
    float: left;
}

nav li.entry {
    position: relative;
    left:25%;
}

nav li.entry a {
    position: relative;
    font-family:'cl';
    display: block;
    color: #131313;
    text-align: center;
    padding: 30.5px 16px;
    text-decoration: none;
    font-size:18px;
    letter-spacing:1px;
}

nav li.entry a:hover:not(.active) {
    transition:0.5s;
    background-color: #eee;
}

nav .active {
    background-color: #eee;
}

nav li.logo {
    padding:14px 16px;
}

nav li.nav-padding {
    padding:22px 1px;
    float:right;
}

nav li.nav-padding-search {
    padding:21px 1px;
    float:right;
}

nav .search-input {
    background: url(search-small.jpg) no-repeat scroll right;
    background-color:white;
    height:32px;
    width: 200px;
    border: #dfdfdf solid 1px;
    padding:0px 5px;
}

Und hier der Code für den Dropdown-Bereich

CSS:

ul li:hover > ul
{
    visibility:visible;
    opacity:1;
}

ul ul, ul ul li ul {
    list-style: none;
    margin: 0;
    padding: 0;  
    visibility:hidden;
    position: absolute;
    z-index: 99999;
    width:180px;
    background:#f8f8f8;
    box-shadow:1px 1px 3px #ccc;
    opacity:0;
    -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;   
}

ul ul {
    top: 43px;
    left: 1px;
}

ul ul li ul {
    top: 0;
    left: 181px;
}

ul ul li {
    clear:both;
    width:100%;
    border:0 none;
    border-bottom:1px solid #c9c9c9;
}

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;
}

Und wahrscheinlich wollt ihr das HTML Grundgerüst auch sehen:

Code:

    <body>
        <header>
            <nav>
                <div class="container-inner">
                    <ul>
                        <li class="logo"><a href="#"><img src="src/img/logo.png"></a></li>
                        <li class="entry"><a href="#" class="active">Damen</a>
                            <ul class="ul-second-area">
                                <li class="li-second-area"><a href="#">Test</a></li>
                                <li class="li-second-area"><a href="#">Test</a></li>
                            </ul>
                        </li>
                        <li class="entry"><a href="#">Herren</a></li>
                        <li class="nav-padding"><a href="#"><img src="user.jpg"></a></li>
                        <li class="nav-padding-search"><input placeholder="search" class="search-input"></input></li>
                    </ul>
                </div>
            </nav>
        </header>
        <section id="teaser">
            <div id="first-contact">
                <input placeholder="PLZ eingeben" class="central-searcht"></input><br />
                <p class="checkbox-stadtteile-einbeziehen"><input type="checkbox">Angrenzende Stadtteile mit einbeziehen</p>
            </div>
        </section>
  
    </body>

Ich freue mich über anregende Ideen für die Lösung :=) VIelen Dank liebe Community!

//Edit:
z-index funktioniert leider nicht... :/

enjoyHB · 06.10.2016

Okay, ich habe den Fehler selber gefunden....
manchmal sieht man den Wald vor lauter Bäumen nicht mehr... "overflow:hidden" im "nav" Element - ich könnte mich gerade selber Ohrfeigen. Liebe Moderatoren, liebe Community: Danke für die Möglichkeit

Thema kann geschlossen werden, da das Problem gelöst ist :=)

lachender_engel · 07.10.2016

enjoyHB schrieb:
Thema kann geschlossen werden, da das Problem gelöst ist :=)

Bitte markiere das Thema als erledigt - über den Präfix im Titel (Beitrag bearbeiten, Präfix auf "Erledigt" setzen)