Antworten auf deine Fragen:
Neues Thema erstellen

Dropdown Navigation über Header anzeigen lassen

E

enjoyHB

Guest

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... :/
 

E

enjoyHB

Guest

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 :D Thema kann geschlossen werden, da das Problem gelöst ist :=)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.633
Beiträge
1.538.446
Mitglieder
67.555
Neuestes Mitglied
scheflo
Oben