Wenn ich etwas mit der ID "drp" hovere soll sich die Class "nav-content" die Höhe ändern. Wie geht das?
Wenn ich etwas "hovere" soll sich eine andere ID ändern.
-
-
Wie sieht der Code aus (HTML / CSS)?
In welchem Verhältnis stehen #drp und .nav-content zueinander (Geschwister... Parent - Child)?
Ohne nähere Angaben ist die Frage nicht zu beantworten.
-
Code
Alles anzeigen<header> <div class="nav-main"> <div class="logo">Blab</div> <ul> <li> <a href="portfolio" class="nav-item">Startseite</a> </li> <li> <a href="downloads" id="drp "class="nav-item">Formularcenter</a> </li> <li> <a href="#" class="drp">Schulprofil</a> <div class="nav-content"> <div class="nav-sub"> <ul> <li><a href="baustein1">Qualitätsbaustein 1</a></li> <li><a href="baustein2">Qualitätsbaustein 2</a></li> <li><a href="baustein3">Qualitätsbaustein 3</a></li> <li><a href="baustein4">Qualitätsbaustein 4</a></li> </ul> </div> </div> </li> <li> <div class="login"> <a class="nav-item" style="float: right;" href="logout.php">Logout</a> </div> </li> </ul> </div> </header>
Code
Alles anzeigen.nav-main{ width: 100%; background-color: #333; height: 70px; color: #fff; display: flex; } .nav-main .logo{ font-family: "Acme",sans-serif; height: 40px; padding: 15px 30px; font-size: 1.4em; line-height: 40px; } .nav-main > ul{ margin: 0; padding: 0; flex: 1; display: flex; list-style-type: none; } .nav-main > ul > li{ } .nav-item{ display: inline-block; padding: 15px 20px; height: 40px; line-height: 40px; color: white; text-decoration: none; } .nav-item:hover{ color: white; background-color: black; } .nav-content{ position: absolute; top: 70px; overflow: hidden; background-color: #333; max-height: 0; } .nav-content a { color: #fff; text-decoration: none; } .nav-content a:hover{ text-decoration: underline; } .nav-sub{ padding: 20px; } .nav-sub ul { padding: 0; margin: 0; list-style-type: none; } .nav-sub ul li a{ display: inline-block; padding: 5px 0; } .nav-item:focus ~ .nav-content{ max-height: 400px; } .nav-content:hover{ max-height: 400px; } .nav-main>ul>li:last-child { margin-left: auto; }
-
Ich verstehe deine Logik nicht. Was soll das sein - ein Dropdown-Menü?
Unter welchem Menüpunkt soll das Dropdown beim hovern erscheinen?
So wie du es aufgebaut hast und erklärst, soll beim hovern über Menüpunkt 'Formularcenter' das Dropdown unter dem Menüpunkt 'Schulprofil' auftauchen.
Das geht so mit CSS gar nicht. Dazu müsstest du Java Script verwenden - aber ich denke, du willst das Dropdown unter dem Menüpunkt, der unter der Maus ist... oder?
-
Nein, beim Hovern von z.B .nav-content soll sich z.B. .nav-item ändern. Mehr nicht das Dropdown-Menü funktioniert ansonsten super.
-
Was denn nun?
Wenn ich etwas mit der ID "drp" hovere soll sich die Class "nav-content" die Höhe ändern
oder
beim Hovern von z.B .nav-content soll sich z.B. .nav-item ändern
... ist aber auch egal... in deinem Code geht beides nicht mit CSS.
Um ein Element mit der Klasse z.B. .nav-item durch hovern über ein Element mit der Klasse z.B. .nav-content zu verändern, muss .nav-item ein Geschwister- oder Kindelement von .nav-content sein.
-
Schau mal hier
https://wiki.selfhtml.org/wiki/CSS/Selek…hwisterselektor
und hier
https://wiki.selfhtml.org/wiki/CSS/Selek…or/Kindselektor
oder auch hier - der allgemeine Teil zu Selektoren
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!