Wie kann ich ein nach oben öffnendes Dropdown-Menü nur mit CSS erstellen?

Dropdown-Menü, das sich mit reinem CSS nach oben öffnet

Die Herausforderung, ein Drop-Down-Menü in ein nach oben öffnendes „Drop-up“-Menü umzuwandeln, besteht ausschließlich aus CSS erfordert eine geringfügige Änderung seines Stils. Das unten vorgeschlagene CSS erzielt diesen Effekt:

#menu:hover ul li:hover ul {
  position: absolute;
  margin-top: 1px;
  font: 10px;
  bottom: 100%;
}

Erklärung

Durch Hinzufügen von unten: 100 %; Gemäß der oben genannten Regel werden die Untermenüs am unteren Rand ihrer übergeordneten Menüelemente positioniert und scheinen „heraufzuklappen“, wenn Sie mit der Maus darüber fahren.

Zusätzliche Verfeinerungen

Für einen verfeinerten Effekt, Sie kann die Überlappung zwischen Untermenüs entfernen, indem Sie Folgendes hinzufügen:

#menu>ul>li:hover>ul {
  bottom: 100%;
}

Dadurch wird sichergestellt, dass nur das Untermenü des schwebenden Menüelements geöffnet wird nach oben.

Demo

Um den Drop-up-Effekt zu erleben, können Sie sich die folgende Demo ansehen: http://jsfiddle.net/W5FWW/4/.

Rand beibehalten

Wenn das ursprüngliche Menü einen Rand hatte, können Sie ihn wiederherstellen Hinzufügen:

#menu>ul>li:hover>ul {
  bottom: 100%;
  border-bottom: 1px solid transparent
}

Dadurch wird der Rand beibehalten und gleichzeitig die Dropdown-Funktionalität beibehalten.

Das obige ist der detaillierte Inhalt vonWie kann ich ein nach oben öffnendes Dropdown-Menü nur mit CSS erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!