Zuerst müssen Sie ein grundlegendes HTML-Markup erstellen. Hier ist ein einfaches Beispiel:
```html
```
In diesem Mark-up haben Sie eine Hauptnavigation (`
Jetzt können Sie mit CSS beginnen:
Das erste, was Sie tun wollen, ist, die Listenpunkte zu entfernen und die Listen so zu formatieren, dass sie horizontal anstatt vertikal angezeigt werden.
```css
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline-block;
background-color: #2c3e50;
color: #ffffff;
padding: 10px;
}
```
Als nächstes verstecken Sie die Untermenüs und zeigen sie an, wenn Sie mit der Maus über das Hauptmenü fahren:
```css
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: inherit;
}
```
Und voila! Sie haben jetzt ein einfaches, funktionsfähiges Dropdown-Menü. Sie können es weiter anpassen, indem Sie Farben, Schriften, Übergänge usw. ändern. Beachten Sie jedoch, dass dies ein sehr einfaches Dropdown-Menü ist. Je nach den spezifischen Anforderungen Ihres Projekts möchten Sie vielleicht Funktionalitäten mit JavaScript hinzufügen.
