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.
Code
<!DOCTYPE html>
<html lang="de">
<head>
<title> Gymnasiallernen </title>
<meta charset="utf-8" >
<link href="/css_webseite/awesome.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">
<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="#" >???? Deutsch 5</a></li>
<li><a href="#" >????Mathe 5</a></li>
<li><a href="#" >???? Englisch 5</a></li>
<li><a href="#" >???? 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="#" >???? Deutsch 6</a></li>
<li><a href="#" >????Mathe 6</a></li>
<li><a href="#" >???? Englisch 6</a></li>
<li><a href="#" >???? 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="#" >???? Deutsch 7</a></li>
<li><a href="#" >????Mathe 7</a></li>
<li><a href="#" >???? Englisch 7</a></li>
<li><a href="#" >???? 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="#" >???? Deutsch 8</a></li>
<li><a href="#" >????Mathe 8</a></li>
<li><a href="#" >???? Englisch 8</a></li>
<li><a href="#" >???? 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="#" >???? Deutsch 9</a></li>
<li><a href="#" >????Mathe 9</a></li>
<li><a href="#" >???? Englisch 9</a></li>
<li><a href="#" >???? 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="#" >???? Deutsch 10</a></li>
<li><a href="#" >????Mathe 10</a></li>
<li><a href="#" >???? Englisch 10</a></li>
<li><a href="#" >???? 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>Neues</a></li>
<li><a><i class="fa fa-phone"></i>Kontakt</a></li>
</ul>
</div>
</body>
</html>