Während ich weiß, dass es mehrere Diskussionen zu diesem Thema gibt, hat keine der Lösungen mein Problem gelöst. Egal, was ich mache, verschwindet das CSS-Untermenü, das ich benutze, nachdem Sie aufhören, über den Eltern-Li zu schweben. Ich habe nicht die leiseste Ahnung, was das alles verursachen könnte, und ich habe wirklich immer auf dieses Thema gestarrt und versucht, eine Lösung zu finden, und kann es einfach nicht. Ich habe versucht, eine Spitze hinzuzufügen: px; zu dem Untermenü im CSS, das mir erlaubte, die Untermenüoptionen auszuwählen, aber es bewegte auch das Menü, so dass es über dem Elternteil li-und zentriert erscheinen würde, was auch nicht gut für mich ist, weil ich es direkt darunter sehen muss . Könnte der Header abgeschnitten werden und wenn ja, was müsste ich hinzufügen, um das zu ändern? Alle Hilfe wird so sehr geschätzt!Dropdown-Untermenü verschwindet bei Hover
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-size: 1.2em;
line-height: 40px;
text-align: left;
display: none;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
@media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
#header {
float: left;
background-color: #ffffff;
cursor: default;
padding: 1.75em 2em 0em 0em;
position: relative;
}<header>
<img id="logo" src="images/logo.jpg" alt="logo">
<div class="nav">
<ul>
<li class="home"><a href="#">Home</a>
</li>
<li class="tutorials"><a href="#">Tutorials</a>
<ul>
<li><a href="#">Tutorial #[email protected]@</a>
</li>
<li><a href="#">Tutorial #2</a>
</li>
<li><a href="#">Tutorial #3</a>
</li>
</ul>
</li>
<li class="about"><a class="active" href="#">About</a>
</li>
<li class="news"><a href="#">Newsletter</a>
<ul>
<li><a href="#">News #1</a>
</li>
<li><a href="#">News #[email protected]@@</a>
</li>
<li><a href="#">News #3</a>
</li>
</ul>
</li>
<li class="contact"><a href="#">Contact</a>
</li>
</ul>
</div>
</header>
Das beigefügte Code-Snippet funktioniert einwandfrei. Gibt es einen bestimmten Browser, gegen den Sie es testen? – z0mBi3
Ich benutze Firefox. Aber das ist eigentlich nicht der ganze Code für die Seite, nur ein Ausschnitt aus der Kopfzeile/nav und dem relevanten CSS, denn da war mein Problem. Bedeutet das, dass es noch etwas anderes geben muss, dass es abschneidet und somit verschwindet, wenn ich versuche, von den Elternli zu verschwinden? – Litost
Vielleicht hätte ein nächster Elternteil einen Überlauf versteckt. Es könnte viele Möglichkeiten geben. Es ist schwierig, die Ursache zu erkennen, ohne den Code zu sehen. – z0mBi3