Dropdown Probleme

hi leute,

das dropdown, das man (hab ich von hier: https://www.transparent-beraten.de/) unter dem menüpunkt magazin sieht kopiert, es geht aber im moment nicht:

#menu-1 .dropit-dropdown .dropit-submenu {
margin-top: 10px;
display: block;
width: 100%;
color: #333;
border: 1px solid #333;
visibility: hidden;
opacity: 0;
background-color: #fff;
padding: 10px;
transition: opacity 0.1s visibility 0.1s margin-top 0.1s;
}


der code scheint aber kaputt zu sein, ich habe ein paar änderungen gemacht und bin nicht so doll in css. wo ist der fehler?

Und wo ist Walter?

"Kaputt" und "geht nicht" sind keine Beschreibung für ein Problem.
Bitte erst mal ausführlich schreiben, was du gemacht hast. Einfach nur den CSS-Teil kopieren bringt ja auch nichts.
Wenn ich das richtig sehe, ist ein jquery-Plugin namens Dropit für das Dropdown-Menü zuständig.

Nachdem ich in dem CSS-Selektor noch keine Indizien für einen offenen Zustand ermitteln konnte, habe mal kurz über den Ort des Verbrechens geschaut. Der Bestohlene scheint mit seinen Komplizen das Untermenü mit einem jQuery Plugin vor neugierigen Blicken geschützt zu haben. Dieses gibt seinen Inhalt also nicht per :hover preis, sondern nur auf die geheime Parole .dropit-open hin.
Entsprechend ist der von dir entwendete Selektor so erstmal beim Hehler deines Vertrauens nichts wert. Soll dein nächster Coup erfolgreich sein, könntest du ein ähnliches Menü mit reinem CSS bauen (hier ein super grobes Besispiel, bitte so nicht übernehmen, das ist in zwei Minuten hässlich zusammengehackt), hast dann aber den Nachteil, dass es auf mobilen Endgeräten unbedienbar ist – zumindest führen wir hier keine Akte über erfolgreiche Touchscreen-Hoverer (außer Whiz auf Tinder).
Eher vom Erfolg gekröhnt wäre ein Blick in die Gebäudepläne von Dropit, dann verläuft der nächste "Drop" sicher nach Plan.

Zitat:

---

hast dann aber den Nachteil, dass es auf mobilen Endgeräten unbedienbar ist

---

Ist nicht ganz richtig. Unter iOS wird das :hover bei tab gesetzt. Unter android funktioniert das nicht ganz so gut, insb. wenn es sich bei dem gehoverten element um einen link handelt, in diesem Fall öffnet er zwar das per :hover-Eingeblendete Element aber verfolgt dann direkt den Link.

Für Android kann man als workaround eine checkbox und ein label benutzen:

HTML-Code:

---

<label for="menubox">Menü</label>
<input type="checkbox" id="menubox" />
<ul id="menu">...</ul>

---

Code (css):

 
#menu {
     display: none;
}
 
#menubox:checked ~ ul#menu {
    display: block;
}
 

Hi Leute, ja, danke mit dem Selektor .dropit-open klappt es nun.

Danke an alle.