Wie bekomme ich das div, welches sichtbar über hover wird, in den Vordergrund?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Leagueofyoutubrs</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<div id="branding">
<a href="index.html" class="Bild"><img src="Bild1.jpg"></a>
<a href="index.html"><h1><span class="highlight">League</span>ofyoutubers</h1></a>
</div>
<div class="reiter">
<img src="dropdown_lines_50x50.jpg">
<div class="reiter-content">
<ul>
<li class="current"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="Social.html">Social</a></li>
<li><a href="kontakt.html">kontakt</a></li>
<li><a href="Teamspeak Regeln&Ip.html">Teamspeak Regeln & Ip</a></li>
<li><a href="gemeinsamer Youtube Kanal.html">Gemeinsamer Youtube Kanal</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="login1.html">Login</a></li>
<li><a href="Datenschutzerklärung.html">Datenschutzerklärung</a></li>
<li><a href="Cookies.html">Cookies</a></li>
<li><a href="Uploadplan.html">Upload Plan</a></li>
<li><a href="Teamvorstellung.html"> Teamvorstellung</a></li>
<li><a href="Gästebuch.html">Gästebuch</a></li>
<li><a href="Rallos.html">Teamvorstellung Rallos</a></li>
<li><a href="Thronax.html">Teamvorstellung Thronax</a></li>
<li><a href="DannyMathieu.html">Teamvorstellung DannyMathieu</a></li>
<li><a href="The_Gamer.html">Teamvorstellung The_Gamer</a></li>
<li><a href="Warprince.html">Teamvorstellung Warprince</a></li>
<li><a href="Strong1Passion.html">Teamvorstellung Strong1Passion</a></li>
<li><a href="Vnetic.html">Teamvorstellung Vnetic</a></li>
<li><a href="DJKenzo.html">Teamvorstellung DJKenzo</a></li>
<li><a href="Karma.html">Teamvorstellung Karma</a></li>
</ul>
</div>
</div>
</header>
</body>
</html>

CSS

body{
font: 15px/1.5 Arial, Helvetica,sans-serif;
padding:0;
margin:0;
background-color:#f4f4f4;
}
.container{
width:80%;
margin:auto;
overflow:hidden;
border: 2px solid black;
}
header{
background:#35424a;
color:#ffffff;
padding-top:30px;
min-height:70px;
border-bottom:#e8491d 3px solid;
clear:both;
}
header li a{
color:#ffffff;
text-decoration:none;
text-transform:uppercase;
font-size:16px;
border:2px solid black;
}
header h1{
color:#ffffff;
float:left;
border:2px solid black;
position:relative;
}
header .highlight, header .current a{
color:#e8491d;
font-weight:bold;
border: 2px solid black;
}
header .Bild{
position:relative;
float:left;
}
header nav{
float:right;
margin-top:10px;
}
header a:hover{
color:#cccccc;
font-weight:bold;
}
ul{
margin:0;
padding:0;
border:2px solid black;
}
.reiter{
position:relative;
border:1px solid green;
height:50px;
width:50px;
float:right;
margin:10px 20px 0px;
}
.reiter-content{
display:none;
position:relative;
padding:5px;
border:1px solid red;
float:right;
box-shadow:2px 2px 5px 0px black;
background:#35424a;
}
.reiter:hover .reiter-content{
display:block;
background:white;
margin:-5px;
background:#35424a;
border:2px solid black;
}
HTML, CSS, Dropdown, Vordergrund

Was möchtest Du wissen?