Menü funktioniert nicht //html//

Hallo allezusamen. :) Ich komme mit meiner Website nicht weiter. Das Problem: Ich habe in meiner Website ein Menü eingebaut. Das Ziel des Menüs ist dass, man über den Menüpunkt "Klassen" geht und dann erscheint eine Untermenü (Klasse 5- 10). Wenn man dann wieder Über eine Klasse geht, erscheint das unterste Menü mit den Fächern. Jedoch verschiebt sich die Ganze Navigationsleist wenn man über die 7- 10 Klasse geht.

Der hier verwendete Code

<!DOCTYPE html> <html lang="de"> <head> <title> Gymnasiallernen </title> <meta charset="utf-8" > <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <style> header{ text-align:center; font-size:20px; padding:10px; } body{ background:rgba(11,11,11,0.4); height:1000px; font-family: sans-serif; } *{ padding:0; margin:0; box-sizing: border-box; list-style-type: none; } .Menu { background:rgb(2, 64, 134); height: 125px; padding-top:5px; position:sticky; top:0px; left:0px; } .Menu ul { display:inline-flex; list-style:none; color:#fff; text-align: right; margin-left:20px; margin-top:20px; } .Menu ul li{ width: 120px; margin:15px; padding:15px; } .Menu ul li a { text-decoration: none; color:white; } .Menu ul li:hover { background: rgb(60, 126, 202) } .Menu .fa { margin-right:5px; } .Untermenu{ display:none; } .Menu ul li:hover .Untermenu{ display:block; position: absolute ; margin-left: -15px; margin-top: 15px; background: rgb(2, 64, 134); border-radius:5px; } .Menu ul li:hover .Untermenu ul{ display:block; margin:10px; } .Menu ul li:hover .Untermenu ul li { width: 150px; padding:5px; border-bottom: 1px dotted #fff; border-radius:0; text-align:left; padding-top:5px; } .Menu ul li:hover .Untermenu ul li:last-child { border:none; } .Menu ul li:hover .Untermenu ul li a:hover { color:rgb(0, 0, 0) } .fa-angle-right { float:right; } .Untermenu-2 { display: none; } .hover-me:hover .Untermenu-2 { position: absolute; display:block; margin-top:-40px; margin-left: 140px; background-color:rgb(2, 64, 134); list-style-type: none; border-radius: 5px; } .Nav_Bild { margin-top:30px; width:60px; height: 60px; margin-left: 50px; float:left; } .Goethe { width: 300px; margin-left: 325px ; margin-top:10px; } </style> </head> <body> <header>Header, nur für Demo zwecke damitman die Css position:sticky sehen kann und verstehen.Scroll jetzt mal und sehe wie das Menü oben am Fensterrand kleben bleibt</header> <div class="Menu"> <img class="Nav_Bild"src="https://gravatar.com/avatar/05985c88be5fa0d7f448e068960452b9?s=80&d=https://static.codepen.io/assets/avatars/user-avatar-80x80-bdcd44a3bfb9a5fd01eb8b86f9e033fa1a9897c3a15b33adfc2649a002dab1b6.png"> <ul> <li><a href="home.html"><i class="fa fa-home"></i>Home</a></li> <li><a href="#">Klassen</a> <div class="Untermenu"> <ul> <li class="hover-me"><a href="#">Klasse 5</a><i class="fa fa-angle-right"></i> <div class="Untermenu-2"> <ul> <li><a href="#" >&#x1F4D6 Deutsch 5</a></li> <li><a href="#" >&#x1F4C8Mathe 5</a></li> <li><a href="#" >&#x1F482 Englisch 5</a></li> <li><a href="#" >&#x1F332 Biologie 5</a></li> <li><a href="#" >Geschichte 5</a></li> <li><a href="#" >Geographie 5</a></li> <li><a href="#" >Physik 5</a></li> </ul> </div> </li> <li class="hover-me"><a href="#">Klasse 6</a><i class="fa fa-angle-right"></i> <div class="Untermenu-2"> <ul> <li><a href="#" >&#x1F4D6 Deutsch 6</a></li> <li><a href="#" >&#x1F4C8Mathe 6</a></li> <li><a href="#" >&#x1F482 Englisch 6</a></li> <li><a href="#" >&#x1F332 Biologie 6</a></li> <li><a href="#" >Geschichte 6</a></li> <li><a href="#" >Geographie 6</a></li> <li><a href="#" >Physik 6</a></li> </ul> </div> </li> <li class="hover-me"><a href="#">Klasse 7</a><i class="fa fa-angle-right"></i> <div class="Untermenu-2"> <ul> <li><a href="#" >&#x1F4D6 Deutsch 7</a></li> <li><a href="#" >&#x1F4C8Mathe 7</a></li> <li><a href="#" >&#x1F482 Englisch 7</a></li> <li><a href="#" >&#x1F332 Biologie 7</a></li> <li><a href="#" >Geschichte 7</a></li> <li><a href="#" >Geographie 7</a></li> <li><a href="#" >Physik 7</a></li> </ul> </div> </li> <li class="hover-me"><a href="#">Klasse 8</a><i class="fa fa-angle-right"></i> <div class="Untermenu-2"> <ul> <li><a href="#" >&#x1F4D6 Deutsch 8</a></li> <li><a href="#" >&#x1F4C8Mathe 8</a></li> <li><a href="#" >&#x1F482 Englisch 8</a></li> <li><a href="#" >&#x1F332 Biologie 8</a></li> <li><a href="#" >Geschichte 8</a></li> <li><a href="#" >Geographie 8</a></li> <li><a href="#" >Physik 8</a></li> </ul> </div> </li> <li class="hover-me"><a href="#">Klasse 9</a><i class="fa fa-angle-right"></i> <div class="Untermenu-2"> <ul> <li><a href="#" >&#x1F4D6 Deutsch 9</a></li> <li><a href="#" >&#x1F4C8Mathe 9</a></li> <li><a href="#" >&#x1F482 Englisch 9</a></li> <li><a href="#" >&#x1F332 Biologie 9</a></li> <li><a href="#" >Geschichte 9</a></li> <li><a href="#" >Geographie 9</a></li> <li><a href="#" >Physik 9</a></li> </ul> </div> </li> <li class="hover-me"><a href="#">Klasse 10</a><i class="fa fa-angle-right"></i> <div class="Untermenu-2"> <ul> <li><a href="#" >&#x1F4D6 Deutsch 10</a></li> <li><a href="#" >&#x1F4C8Mathe 10</a></li> <li><a href="#" >&#x1F482 Englisch 10</a></li> <li><a href="#" >&#x1F332 Biologie 10</a></li> <li><a href="#" >Geschichte 10</a></li> <li><a href="#" >Geographie 10</a></li> <li><a href="#" >Physik 10</a></li> </ul> </div> </li> </ul> </div> </li> <li><a href="#">Neues</a></li> <li><a href="Kontakt.html"><i class="fa fa-phone"></i>Kontakt</a></li> </ul> </div> </body> </html>

Add Comment

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

Comments

No comments yet. Be the first!