So implementieren Sie ein Dropdown-Menü in CSS-CSS-Tutorial-php.cn

So implementieren Sie ein Dropdown-Menü in CSS

醉折花枝作酒筹

Freigeben： 2023-01-05 16:10:31

Original

13339 Leute haben es durchsucht

Methode: Verwenden Sie zuerst ein div-Element, um den Inhalt des Dropdown-Menüs zu erstellen, und legen Sie den Stil „display:none“ fest, um ihn auszublenden. Erstellen Sie dann ein HTML-Element, das das Dropdown-Menü öffnet. „:hover“-Selektor zum Festlegen von „display:block“ Stil, der zum Anzeigen des Dropdown-Menüs verwendet wird, wenn die Maus über die Dropdown-Schaltfläche bewegt wird.

So implementieren Sie ein Dropdown-Menü in CSS

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

HTML-Teil:

Wir können jedes HTML-Element verwenden, um das Dropdown-Menü zu öffnen, wie zum Beispiel: oder ein

Verwenden Sie Containerelemente (z. B.

), um den Inhalt des Dropdown-Menüs zu erstellen und ihn an der gewünschten Stelle zu platzieren.

Verwenden Sie

-Elemente, um diese Elemente zu umschließen, und verwenden Sie CSS, um den Dropdown-Inhalt zu formatieren.

CSS-Teil: Die

.dropdown-Klasse verwendet position:relative, wodurch der Inhalt des Dropdown-Menüs so festgelegt wird, dass er in der unteren rechten Ecke der Dropdown-Schaltfläche platziert wird (unter Verwendung von position:absolute). Die Klasse

.dropdown-content ist das eigentliche Dropdown-Menü. Es ist standardmäßig ausgeblendet und wird angezeigt, nachdem die Maus auf das angegebene Element bewegt wurde. Beachten Sie, dass der Wert für die Mindestbreite auf 160 Pixel festgelegt ist. Sie können es nach Belieben ändern. Hinweis: Wenn Sie den Dropdown-Inhalt auf die gleiche Breite wie die Dropdown-Schaltfläche festlegen möchten, stellen Sie die Breite auf 100 % ein (die Einstellung „overflow:auto“ kann auf kleinen Bildschirmen scrollen).

Wir verwenden das Box-Shadow-Attribut, um das Dropdown-Menü wie eine „Karte“ aussehen zu lassen.

: Der Hover-Selektor wird verwendet, um das Dropdown-Menü anzuzeigen, wenn der Benutzer die Maus über die Dropdown-Schaltfläche bewegt.

Code:

<!DOCTYPE html>
<html>
<head>
<title>document</title>
<meta charset="utf-8">
<style>
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>

<body>
<div class="dropdown">
    <span>鼠标移动到这里，会出现下拉列表</span>
    <div class="dropdown-content">
        <p>表单一</p>
        <p>表单一</p>
    </div>
</div>
</body>
</html>

Nach dem Login kopieren

Effekt:

So implementieren Sie ein Dropdown-Menü in CSS

Empfohlenes Lernen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Dropdown-Menü in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!