• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Fehler im Dropdown Menü

Status
Für weitere Antworten geschlossen.
F

FreakySlimeHD

Neues Mitglied
Heii, zuerst mal eine kleine Info von mir. :) Ich bin 15 Jahre alt und lerne zurzeit noch HTML, CSS & PHP. Also seid mir bitte nicht sauer wenn ich etwas nicht verstehe oder Falsch machen. :) Danke!

Ich habe mir ein kleines Dropdown Menü "gecodet". (Aus einem Tutorial)
Nun habe ich das Problem das wenn es erscheint sehr schnell wieder weg geht und man sehr Schnell mit der Maus sein muss um drauf zu kommen. Könntet ihr mal kurz über meinen Code schauen? :)

Mein HTML Code: (Menü Punkte nur erfunden.)
Code: 
<html>
    <header>
        <title>Startseite</title>
        <link href="css/style.css" rel="stylesheet" />
    </header>
    <body>
        <div class="nav">
            <ul>
                <li>Startseite</li>
                <li>Minecraft
                    <ul>
                        <li>Statuscheck</li>
                        <li>Verfügbarkeit</li>
                        <li>Bestellen</li>
                    </ul>
                </li>
                <li>Musik Bots
                    <ul>
                        <li>Verfügbarkeit</li>
                        <li>Bestellen</li>
                    </ul>
                </li>
                <li>Kontakt</li>
                <li>Server Status</li>
                <li>Kundenlogin</li>
            </ul>
        </div>
    </body>
    <footer>
       
    </footer>
</html>

Mein CSS Code:
Code: 
@charset "utf-8";
body {
  background-image:url("../images/background.jpg");
  font-family:Melvetica, sens-serif;
}
* html body {
  text-align:center;
}
.nav {
  position:absolute;
  top:0;
  left:auto;
}
.nav ul {
  margin:0;
  padding:0;
  float:left;
  height:38px;
  box-shadow:0px 0px 32px 0px #lll;
  border-radius:10px:
}
.nav ul li {
  list-style:none;
  float:left;
  background:#222;
  padding:10px;
  width:85px;
  text-align:center;
  transition:all 500ms;
  color:#999;
  border-right:1px solid #444;
  position:relative;
  border:none;
}
.nav ul li:first-child {
  border-radius:10px 0 0 10px;
}
.nav ul li:last-child {
  border-radius:0 10px 10px 0;
  border:none;
}
.nav ul li:hover {
  background:#09C;
  color:#FFF;
}
.nav ul li:hover ul {
  height:auto;
  opacity:1;
}
.nav ul li ul {
  height:0;
  overflow:hidden;
  opacity:1;
  position:absolute;
  left:0;
  top:45px;
}
.nav ul li ul li {
  width:130px;
}
.nav ul li ul li:first-child {
  border-radius:10px 10px 0 0;
  border:none;
}
.nav ul li ul li:last-child {
  border-radius:0 0 10px 10px;
  border:none;
}

Wäre sehr Nett von euch wenn ihr euch das mal anschaut. Ihr wisst auch glaube ich was das Problem ist.
Falls nicht: Das dropende Menü soll nicht verschwinden damit man die Menü punkte anklicken kann.


Screenshot vom Menü:
1046e8329bfe4082bac2335435f50785.png


Ich hoffe ihr könnt mir Helfen! :D

Mit Freundlichen Grüßen,
FreakySlimeHD.
 
Werbung:
Die Ursache findet sich in der oberen Startposition top:45px, die eine Lücke zwischen dem Haupt- und Untermenü erzeugt. Wird diese mit dem Mauszeiger überfahren, schließt das Untermenü vorzeitig.

Lösung: Stattdessen für das Dropdown einen oberen Innenabstand padding-top festlegen. Der obere Elementrand schließt somit direkt am Hauptmenüpunkt an, und die Lücke befindet sich nicht mehr außerhalb, sondern innerhalb des Untermenüs.

Demo: https://jsfiddle.net/spicelab/u73romj2/

Grundsätzlicher Hinweis zur falschen HTML-Syntax:
HTML: 
<html>
  <header><!-- falsch -->
    <title>Startseite</title>
    <link href="css/style.css" rel="stylesheet" />
  </header><!-- falsch -->
  <body>
    ...
  </body><!-- falsch -->
  <footer>
  </footer>
</html>
gehört so:
HTML: 
<!DOCTYPE html>
<html>
  <head>
    <title>Startseite</title>
    <link href="css/style.css" rel="stylesheet" />
  </head>
  <body>
   ...
   <footer>
   </footer>
  </body>
</html>

Moderation: Von HTML nach CSS verschoben.
 
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben