Wie kann ich dafür sorgen, dass ein reines CSS-Dropdown-Menü nach oben statt nach unten geöffnet wird?

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

Dropdown-Menüs mit reinem CSS sind eine hervorragende Möglichkeit, intuitiv auf Websites zu navigieren. Bei einigen Designs möchten Sie jedoch möglicherweise, dass sich das Menü nach oben statt nach unten öffnet. So können Sie dies rein durch CSS erreichen:

Das Problem:
Sie haben ein Dropdown-Menü mit CSS, das sich nach unten öffnet, aber Sie möchten es so ändern, dass es sich nach oben öffnet , wobei seine Position und Funktionalität erhalten bleiben.

Die Lösung:
Um das Dropdown-Menü nach oben zu öffnen, müssen Sie Folgendes tun Ändern Sie die CSS-Regel, die die Untermenüs positioniert. So geht's:

Option 1: Passen Sie den oberen Rand an

#menu:hover ul li:hover ul {
  ...
  margin-top: -22px;
}

Ändern Sie ihn in:

#menu:hover ul li:hover ul {
  ...
  margin-top: 1px;
  bottom: 100%;
}

Durch Hinzufügen von unten: 100 %;, Sie erzwingen, dass das Untermenü über dem übergeordneten Menüelement angezeigt wird.

Option 2: Zielspezifisch Untermenüs

Wenn Sie nicht möchten, dass sich alle Untermenüs nach oben öffnen, können Sie mit dieser Regel bestimmte Untermenüs gezielt ansprechen:

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

Option 3: Alternative Demo

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

Dieser alternative Ansatz behält den Rand des Untermenüs bei.

Durch die Implementierung dieser CSS-Änderungen können Sie Ihre nach unten gerichtete Ansicht mühelos konvertieren reines CSS-Dropdown-Menü in ein nach oben gerichtetes umwandeln. Denken Sie daran, die Randwerte nach Bedarf an Ihr Design anzupassen.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass ein reines CSS-Dropdown-Menü nach oben statt nach unten geöffnet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!