Menü funktioniert nicht //html//


#1
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.
Hier noch einmal der Code.

Html

HTML:
<!DOCTYPE html>
<html lang="de">
<head>
    <title> Gymnasiallernen </title>
    <meta charset="utf-8" >
    <link href="Test.css" rel="stylesheet" type="text/css">
    <link href="[URL]https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css[/URL]" rel="stylesheet">
</head>
<body>
    <div class="Menu">
        <img class="Nav_Bild"src="GL.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 </a></li>
                                <li><a href="#" >&#x1F4C8Mathe </a></li>
                                <li><a href="#" >&#x1F482 Englisch </a></li>
                                <li><a href="#" >&#x1F332 Biologie </a></li>
                                <li><a href="#" >Geschichte  </a></li>
                                <li><a href="#" >Geographie </a></li>
                                <li><a href="#" >Physik </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 </a></li>
                                <li><a href="#" >&#x1F4C8Mathe </a></li>
                                <li><a href="#" >&#x1F482 Englisch </a></li>
                                <li><a href="#" >&#x1F332 Biologie </a></li>
                                <li><a href="#" >Geschichte  </a></li>
                                <li><a href="#" >Geographie </a></li>
                                <li><a href="#" >Physik </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 </a></li>
                                    <li><a href="#" >&#x1F4C8Mathe </a></li>
                                    <li><a href="#" >&#x1F482 Englisch </a></li>
                                    <li><a href="#" >&#x1F332 Biologie </a></li>
                                    <li><a href="#" >Geschichte  </a></li>
                                    <li><a href="#" >Geographie </a></li>
                                    <li><a href="#" >Physik </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 </a></li>
                                <li><a href="#" >&#x1F4C8Mathe </a></li>
                                <li><a href="#" >&#x1F482 Englisch </a></li>
                                <li><a href="#" >&#x1F332 Biologie </a></li>
                                <li><a href="#" >Geschichte  </a></li>
                                <li><a href="#" >Geographie </a></li>
                                <li><a href="#" >Physik </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 </a></li>
                                    <li><a href="#" >&#x1F4C8Mathe </a></li>
                                    <li><a href="#" >&#x1F482 Englisch </a></li>
                                    <li><a href="#" >&#x1F332 Biologie </a></li>
                                    <li><a href="#" >Geschichte  </a></li>
                                    <li><a href="#" >Geographie </a></li>
                                    <li><a href="#" >Physik </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 </a></li>
                                  <li><a href="#" >&#x1F4C8Mathe </a></li>
                                  <li><a href="#" >&#x1F482 Englisch </a></li>
                                  <li><a href="#" >&#x1F332 Biologie </a></li>
                                  <li><a href="#" >Geschichte  </a></li>
                                  <li><a href="#" >Geographie </a></li>
                                  <li><a href="#" >Physik </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>
<img class="Goethe" src="Goethe.png">

</body>
</html>


Css



CSS:
* {
    padding:0;
    margin:0;
    box-sizing: border-box;
    list-style-type: none;
}
.Menu {
    background:rgb(2, 64, 134);
    height: 125px;
    padding-top:5px;
}
.Menu ul {
    display:inline-flex;
    list-style:none;
    color:#fff;
    text-align: right;
    margin-left:300px;
    margin-top:20px;
}
.Menu ul li{
width: 120px;
margin:15px;
padding:15px;
}
body {
    font-family: sans-serif;
}
.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;
    background: transparent;
    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;
}
Vielen dank für das anschauen, ich würde mich über Hilfe freuen.
Kalschnie
 
Zuletzt bearbeitet von einem Moderator:

basti1012

Erfahrenes Mitglied
#2
habe mal mit dein Code ein Pen erstellt und kann nix von deinen problemen erkennen.
Bei den Fächern habe ich mal nee Zahl hinter geschrieben weil wenn bei jeder Klasse die gleichen Fächern stehen kann man ja kein unterschied sehen.
Bei mir wird überall das richtige angezeigt , und wenn man wieder zurüch geht wird auch das angezeigt wo man mit der Maus rein geht ( also komplett richtig so wie es jetzt ist ).

Soll das Bild eigentlich neben der Menü oder oben drüber stehen ?
Ich würde da dann an der Css auch noch was dran ändern.
 
#3
habe mal mit dein Code ein Pen erstellt und kann nix von deinen problemen erkennen.
Bei den Fächern habe ich mal nee Zahl hinter geschrieben weil wenn bei jeder Klasse die gleichen Fächern stehen kann man ja kein unterschied sehen.
Bei mir wird überall das richtige angezeigt , und wenn man wieder zurüch geht wird auch das angezeigt wo man mit der Maus rein geht ( also komplett richtig so wie es jetzt ist ).

Soll das Bild eigentlich neben der Menü oder oben drüber stehen ?
Ich würde da dann an der Css auch noch was dran ändern.
Hallo basti1012,
Es freut mich das du dir mal mein Code genauer angeschaut hast. Das ist sehr freundlich von dir.
Leider besteht das Problem immer noch (siehe anhang) diesmal habe ich auch ein paar Fotos gemacht. Aber wenn es bei dir nicht besteht, dann habe ich Hoffnung das es kein Fehler im Code sondern am PC ist. Ich bin offen für Änderungen am Css und danke dir für dein Feedback. Da dies erst meine erste richtige Website ist bin ich leider auch nich nicht so erfahren. Das Titelebild (Gl) soll eigentlich in der Navigation Zeile sein und das menü beim Scrollen mit runter kommen. Aber auch dabei verschwindet es. Die Fotos kann ich leider nich hochladen weil diese zu groß sind. Falsch du eine idee hast wie ich das Foto dir zukommen lassen kann dann bin ich sehr gespannt. Ich hoffe es ist in Ordnung das wir uns duzen.
Vielen Dank.
 

basti1012

Erfahrenes Mitglied
#4
Habe mal mit dein Code ein Pen erstellt und kann nix von deinen problemen erkennen.
.
Habe ich vergessen den Link zu posten oder wurde der gelöscht ? Merkwürdig !
https://codepen.io/basti1012/pen/MNYwRR

Hallo basti1012,
1= (siehe anhang) diesmal habe ich auch ein paar Fotos gemacht
2= Das Titelebild (Gl) soll eigentlich in der Navigation Zeile sein und das menü beim Scrollen mit runter kommen. Aber auch dabei verschwindet es.
3=Die Fotos kann ich leider nich hochladen weil diese zu groß sind.
4=Ich hoffe es ist in Ordnung das wir uns duzen.
Vielen Dank.
zu1 . Kann keinen Anhang sehen. Hast du den vergessen zu posen , oder läuft bei mir gerade was verkehrt ?
zu2. Was heißt mit runter kommen ?. So wie das Menü hier im Forum das es immer da oben sichtbar ist egal wie weit man Scrollt ? ( das wäre dann wohl position sticky oder fixed
zu3. In den Fall sind die Bilder noch nicht so wichtig. Hättest du ein Link dann wäre ok , aber dafür hochladen brauchst du die nicht .
zu4. Jo geht klar
 

basti1012

Erfahrenes Mitglied
#6
bis auf die Hauptleiste , die ich bei dir jetzt nicht sehen kann ist doch alles in Ordnung.
Wie soll es den aussehen ?
Oder fragen wir mal anders , was müßte an meinen gepostet Code anders aussehen ?
Zeigt es den bei Codepen richtig an, oder willst du da auch was geändert haben ?
 
#7
bis auf die Hauptleiste , die ich bei dir jetzt nicht sehen kann ist doch alles in Ordnung.
Wie soll es den aussehen ?
Oder fragen wir mal anders , was müßte an meinen gepostet Code anders aussehen ?
Zeigt es den bei Codepen richtig an, oder willst du da auch was geändert haben ?


Das Problem ist ja gerade, wenn man auf die hauptleiste geht dann 》》》 Klassen 》》》 klasse 7 (oder höher) dann verschwindet das Hauptmenü und die Liste verschiebt sich nach unten. Dein Code ist sehr gut. Danke
 
#8
Vielen Dank für deine Hilfe, nachdem ich dein Code mit meinem abgeglichen habe und alle Korrekturen übertragen habe, funktioniert die Website immer noch nicht. Jedoch habe ich deinen Code abkopiert und eine neues Datei aufgemacht. Jetzt funktioniert es. Danke für die Hilfe.
 

basti1012

Erfahrenes Mitglied
#9
Ist ja gut das es jetzt geht.
Wäre aber für dich auch gut das du da mal kuckst was bei dir falsch wahr ,weil du willst ja auch was lernen damit beim nächsten mal dir der Fehler nicht mehr passiert.

Ein großer Fehler kann es ja nicht gewesen sein weil ich habe dein Code ja 1 zu 1 kopiert und nur den einen Magin Wert geändert ( glaube ich jetzt zumindest ).
 
#10
Vielen vielen Dank nochmal.
Ich habe den Code jetzt nich eins zwei mal kontrolliert und habe die Vermutung das es an dem margin Wert liegt, da das menü vorher ( bevor ich die Position verändert habe noch funktionierte) .
Vielen Dank nochmals.
 

Neue Beiträge