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="https://cdnjs.cloudflare.com/ajax/libs/query-result/0.1.3/query-result.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.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">&#8801 ist-auf</a> <a class="menue-button zu" href="#nav-menue">&equiv;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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!