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
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
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>