Heim > Artikel > Web-Frontend > So implementieren Sie ein Dropdown-Menü in CSS
So implementieren Sie ein Dropdown-Menü in CSS
- 醉折花枝作酒筹Original
- 2021-04-22 10:44:2813294Durchsuche
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.
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.
Verwenden Sie
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>Effekt:
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!