navi Menü
Ich habe ein Navi Menü das sich nicht richtig ausklappen läßt.
Ist alles irgendwie schief um krum.
Kann mir einer helfen das zu reparieren
Der hier verwendete Code
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<style>
@media screen and (min-width: 61em){
#Titel-m { display: none;}
header{ display: none;}
#Block {position:fixed; top:28.5%; right:0px; bottom:2.7%; width:60%; z-index:2; background-color:
#c9ad7f; opacity: 0.7;}
}
@media screen and (max-width: 60.99em){
header {
background-color:none;
width: 100%;
height:200px;
display:inline-block;
}
#bb,#bb1{
width:100%;
display:none;
text-align:center;
}
header:target ~ #bb,header:target ~ #bb1{
display:block;
}
#steuerung li {
list-style: none;
float: left;
width: 100%;
border-bottom: 2px solid silver;
padding-bottom: 0.4em;
padding-top: 0.4em;
}
li{
background:green;
}
#steuerung a {
padding: 0.2em;
text-decoration: none;
color: white;
}
#steuerung {
float: left;
width: 40%;
display: none;
}
#steuerung a:hover {
color: #ffffff;
background-color: #c9ad7f;
}
.menue-button {
background-color: #970a2c;
display: block;
position: absolute;
left: 0;
top: 0;
padding: 0.2em;
color: white;
cursor: pointer;
text-decoration: none;
font-size: 20px;
}
.menue-button:hover {
color: black;
background-color: #c9ad7f;
}
.auf{
display:none;
}
#nav-menue:target #steuerung {
display: block;
}
#nav-menue:target + .auf{
display:block;
}
#nav-menue:target ~ .zu{
display:none;
}
.auf:target ~ .zu{
display:block;
}
</style>
<script src="/js_webseite/query-result.js"></script>
<script src="/js_webseite/jquery.js"></script>
</head>
<body>
<header id="nav-menue">
<nav id="steuerung" role="navigation">
<ul>
<li><a class="Menu" href="example.com" >Home</a></li>
<li><a class="Menu" href="example.com" >seite1</a></li>
<li><a class="Menu" href="example.com" >seite2</a></li>
<li><a class="Menu" href="example.com" >seite3</a></li>
</ul>
</nav>
</header>
<a class="menue-button auf"
href="#nav-menue-zu">≡ ist-auf</a>
<a class="menue-button zu"
href="#nav-menue">≡zu</a>
<a id="bb" href="#nav-menue-zu">--------Erster Link zum Schliessen---------------------</a>
<a id="bb1" href="#nav-menue-zu">--------Zweiter Link zum Schliessen---------------------</a>
<div id="Block"></div>
<div id="scroller"></div>
<div id="Text"></div>
</body>
</html>