Overflow: hidden funktioniert nicht

[abhar]

Hallo!

Ich bin Anfänger in HTML, weshalb ich immer noch große Schwierigkeiten habe. Normalerweise finde ich irgendwann eine Lösung, allerdings ist das hier nicht der Fall... xD
Mein Problem ist, dass overflow: hidden nicht funktioniert. Ich habe ein Untermenü erstellt und das ist eigentlich unsichtbar. Nur wenn man mit der Maus über dem Platz des Untermenüs fährt, wird es sichtbar, das will ich allerdings nicht. Deshalb wollte ich overflow: hidden benutzen, damit das Untermenü nur erscheint, wenn man mit der Maus über den ,,Hauptpunkt" fährt.

Hier ist der HTML-Code:
<nav>
<ul id="menü">
<li id="navi01"><a href="startseite.html">STARTSEITE</a></li>
<li id="navi02"><a href="news.html">DIE NEWS</a></li>
<li id="navi03"><a href="forum.html">FORUM</a>
<ul id="untermenü">
<li><a href="mathe.html">MATHE</a></li>
<li><a href="naturwissenschaften.html">NATURWISSENSCHAFTEN</a></li>
<li>
</ul>
</li>
<li id="navi04"><a href="kontakt.html">KONTAKT</a></li>
</ul>
</nav>

Und hier der CSS-Code:

#menü {
margin-left: -50px;
}

#menü a {
text-decoration: none;
color: #000000;
font-family: BigNoodleTitling;
font-size: 25px;
}

#menü li {
margin: 35px;
}

nav ul li:hover ul {
height: auto;
opacity: 1;
margin-top: 10px;
}

nav ul li ul {
opacity: 0;
position: absolute;
width: 250px;
background-color: #BDBDBD;
padding-left: 5px;
margin-left: 300px;
overflow: hidden;
}

#untermenü li {
margin: 15px;
}

Es funktioniert nicht, denn wenn ich mit der Maus über den Platz des Untermenüs fahre, erscheint es dennoch.
Könnte mir jemnd vielleicht helfen?

 

[Aaron3219]

Ich glaube da hat jemand "overflow: hidden;" mit "visibilty: hidden;" und "display: none;" verwechselt ;)
benutze einfach display: none;

Overflow spricht nämlich die Scrollbars an.
Du hast also im Prinzip gesagt, das Ding darf keine Scrollbars haben, was es ohnehin schon nicht hat.

Edit:
Achso und schau dir die CSS-Selektoren an:
https://www.w3schools.com/cssref/css_selectors.asp
ist nicht kompliziert oder so, wird dir aber helfen.
Das aus folgendem Grund:
nav ul li ul
ist etwas anderes als
nav > ul > li > ul
was du meiner Meinung nach meintest.
Selbst wenn nicht, sie machen einem das Leben leichter!

 

[abhar]

Vielen Dank für die Antwort! Jetzt kann man es tatsächlich nicht sehen. Das Problem ist nur: Wenn ich mit der Maus mit der Maus über dem Hauptpunkt fahre, sieht man es ebenfalls nicht mehr... xD Ich habe visibility bei nav ul li ul eingefügt. Sollte ich es woanders einfügen, damit man es noch sieht, wenn man über den Hauptpunkt fährt?

 

[Aaron3219]

Das liegt daran, dass du anscheinend noch nie mit display: none und so gearbeitet hast :)
Du benutzt hier opacity: 0, welches du beim hovern auf 1 setzt.
opacity ist eine Transparenz. Es macht das Ding aber nur durchsichtig und nicht nicht-existent wenn du weißt was ich meine (die Wortdopplung ist gewollt!). Für die Maus ist es also immer noch da, nur halt durchsichtig. Dementsprechend reagiert es auch immer noch beim hovern.

Nimm also den opacity Kram komplett raus.
Mach stattdessen display: none;
Beim hovern dann display: block;

Ein paar andere Anmerkungen:
Benutze auf gar keinen Fall position: absolute mit einer festen margin-Angabe, wenn es für alle Auflösungen eines Bildschirms sein soll.

Dürfte ich außerdem mal Fragen, was dein Ziel ist?
Also, was es später werden soll?