Wie man ein horizontales Dropdown-Menü in HTML

Zeigen traditionelle Navigation auf Webseiten normalerweise Menüelemente mit einem Dropdown-Menü vertikal auf dem Bildschirm erscheinen, aber wie machen Sie es horizontal zu löschen, wenn das Websitedesign verlangt? Da HTML allein horizontalen Dropdown-Menüs nicht unterstützt, müssen Sie Cascading Style Sheets (CSS) verwenden, um dies zu ermöglichen. CSS können Sie die Position von Elementen auf einer Seite, wie Navigationspunkte, kartieren, macht es möglich, dass Sie ein nicht-traditionellen horizontales Dropdown-Menü auf Ihrer Website implementieren.

Anweisungen

1 Öffnen Sie ein HTML-Editor oder Notepad und Typ Ihrer HTML-Seite-Struktur:

< Head >

Head-Inhalt hier

< / head >

< Körper >

Inhalt hier.

< / body >

2 Geben Sie in Ihrem Menü-Struktur mit ungeordneten Liste Tags innerhalb der < Körper > HTML-Tags. Um Untermenüs zu erstellen, stellen Sie eine ungeordnete Liste innerhalb der wichtigsten Listenelement. Der folgende Code ist ein Beispiel für eine Menüstruktur mit ein Untermenü:

< Ul >

<li><a href="appetizers.html">Appetizers</a></li>

<li><a href="entrées.html">Entrées</a>

<ul>

<li><a href="meat.html">Meat</a></li>

<li><a href="seafood.html">Seafood</a></li>

<li><a href="pasta.html">Pasta</a></li>

</ul>

</li>

</ul >

3 Geben Sie in Ihrem Stylesheet innerhalb der < Head >-Tags Ihres HTML-Dokuments. Um zu Beginn den CSS-Code verwenden Sie Tags < Stil >:

< Stil >

CSS-Code hier.

< / style >

4 Entfernen Sie die Standardformatvorlage der ungeordnete Liste z. B. Aufzählungszeichen und Einrückungen, mit dem folgenden CSS-Code:

UL {}

list-style: none;

width: 100px;

margin: 0;

padding: 0;

}

Geben Sie die Breite Ihres Menüs mithilfe des Attributs "Breite".

5 Legen Sie Ihr Hauptmenü Position zu "Verwandten."

UL li {}

position: relative;

}6

Definieren Sie die Position der im Untermenü zu machen, neben seiner übergeordneten Element angezeigt werden:

li Ul {}

display: none;

position: absolute;

left: 99px;

top: 0;

}7

Fügen Sie eine Hover-Eigenschaft. Dies ermöglicht das Untermenü ","horizontal Dropdown-"Wenn Sie die Maus über den Hauptmenüpunkt".

Li:hover Ul {}

display: block;

}

Tipps & Warnungen

• Sie können Ihr Menü Stil, indem Sie die Menüpunkte per CSS Farben und Rahmen hinzufügen.
• Da einige CSS-Code möglicherweise anders auf verschiedenen Browsern, insbesondere der Internet Explorer angezeigt, testen Sie den Code auf mehreren Browsern, eventuelle Unstimmigkeiten zu sehen. Möglicherweise müssen Sie Ihren Code optimieren es verschiedenen Browsern einheitlich erscheint.