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:
Ich freue mich über anregende Ideen für die Lösung :=) VIelen Dank liebe Community!
//Edit:
z-index funktioniert leider nicht... :/
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:
Code für die Navigation:
Und hier der Code für den Dropdown-Bereich
Und wahrscheinlich wollt ihr das HTML Grundgerüst auch sehen:
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... :/