HTML imitiert die Dropdown-Menüfunktion der Baidu-Enzyklopädienavigation

HTML imitiert die Dropdown-Menüfunktion der Baidu-Enzyklopädienavigation. Der spezifische Code lautet wie folgt:

Demonstration Abbildung 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>html+CSS imitieren das Dropdown-Menü der Baidu-Enzyklopädie-Navigation</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</Kopf>
<Text>
<div Klasse="Header">
 <div Klasse="obere Leiste">
  Header-Inhalt</div>
 <div Klasse="Navigationsleiste">
  <div Klasse="nav-bg">
   <div Klasse="nav-top">
    <div Klasse="Navigationsinhalt">
     <ul Klasse="Navigationsinhalt-Box">
      <li Klasse="Index ein">
       <span><a href="#">Startseite</a></span>
      </li>
      <li Klasse="Katze">
       <span><a href="#">Kategorie</a></span>
       <ul>
        <li><a href="#">Natur</a></li>
        <li><a href="#">Kultur</a></li>
        <li><a href="#">Geographie</a></li>
        <li><a href="#">Geschichte</a></li>
        <li><a href="#">Leben</a></li>
        <li><a href="#">Gesellschaft</a></li>
        <li><a href="#">Kunst</a></li>
        <li><a href="#">Zeichen</a></li>
        <li><a href="#">Wirtschaft</a></li>
        <li><a href="#">Technologie</a></li>
        <li><a href="#">Sport</a></li>
       </ul>
      </li>
      <li Klasse="Spezial">
       <span><a href="javascript:void(0)">Ausgewählte Enzyklopädie</a></span>
       <ul>
        <li><a href="#">Heute in der Geschichte</a></li>
        <li><a href="#">Digitales Museum</a></li>
        <li><a href="#">Städtelexikon</a></li>
        <li><a href="#">Hochschul-Enzyklopädie</a></li>
        <li><a href="#">Kunst-Enzyklopädie</a></li>
        <li><a href="#">Wissenschaftsenzyklopädie</a></li>
       </ul>
      </li>
      <li Klasse="Benutzer">
       <span><a href="javascript:void(0)">Benutzer</a></span>
       <ul>
        <li><a href="#">Kaulquappengruppe</a></li>
        <li><a href="#">Traumplan</a></li>
        <li><a href="#">Enzyklopädie-Aufgaben</a></li>
        <li><a href="#">Wikipedia Mall</a></li>
       </ul>
      </li>
      <li class="Zusammenarbeit">
       <span><a href="javascript:void(0)">Autoritative Zusammenarbeit</a></span>
       <ul>
        <li><a href="#">Kooperationsmodus</a></li>
        <li><a href="#">Häufig gestellte Fragen</a></li>
        <li><a href="#">Kontaktinformationen</a></li>
       </ul>
      </li>
      <li Klasse="mobil">
       <span><a href="javascript:void(0)">Mobile Enzyklopädie</a></span>
       <ul>
        <li><a href="#">Kunde</a></li>
        <li><a href="#">Webversion</a></li>
       </ul>
      </li>
     </ul>
    </div>
   </div>
  </div>
 </div>
</div>
</body>
</html>

Stil

body{margin:0;padding:0;font-family:arial,tahoma,'Microsoft Yahei','\5b8b\4f53',sans-serif;;}
 
.top-bar{Hintergrundfarbe:#f3f3f3;Textausrichtung:Mitte;Padding:2.5em;}
a{padding-bottom:3px;Farbe:weiß;Text-Decoration:none;}
ul{Listenstil: keine;Padding: 0;Margin: 0;}
li{text-align:center;}
 
.nav-bar{position:relative;z-index:1000;überlauf:versteckt;min-breite:900px;höhe:45px;}
.nav-bar:hover{overflow:visible;-webkit-transition:alles 0,5 s langsam;transition:alles 0,5 s langsam;}
.nav-bg{position:absolute;width:100%;height:272px;background:#24619c;background:rgba(36,97,158,.95);-webkit-transition:.3s;transition:.3s;z-index:9999;}
.nav-top{height:43px;border-top:1px solid #5895d5;border-bottom:1px solid #3b92e9;background:#459df5;}
.nav-content{position:absolute;width:80%;left:10%;}
.nav-content-box{position:absolut;oben:0;links:0;Breite:100%;}
.nav-content-box>li{float:left;line-height:43px;}
.nav-content-box>li:hover{background:#19508b;}
.nav-content-box>li>span>a{display:block;width:100%;margin:0;height:41px;line-height:41px;}
.nav-content-box>li:hover>span>a{background:#338ce6;}
ul>li.index,ul>li.cat,ul>li.special,ul>li.user,ul>li.cooperation,ul>li.mobile{width:120px;}
ul>li.index{height:43px;}
ul.nav-content-box>li>ul{border-right:solid 1px #3a6fa2;margin:10px 0 6px}
ul.nav-content-box>li>ul:after{Sichtbarkeit:versteckt;Anzeige:block;Schriftgröße:0;Inhalt:" ";Löschen:beide;Höhe:0}
.nav-content-box>li:hover>ul{border-right:none;padding-right:1px;}
ul.nav-content-box>li>ul>li{float:left;width:100%;line-height:2;text-align:center;}
ul.nav-content-box>li.cat>ul>li{width:49%;}
ul.nav-content-box>li>ul>li>a{display:block;width:100%;}

Zusammenfassen

Oben sehen Sie die vom Herausgeber eingeführte HTML-Imitation der Dropdown-Menüfunktion für die Navigation in der Baidu-Enzyklopädie. Ich hoffe, sie ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!

<<: Bezüglich der chinesischen verstümmelten Zeichen bei der Übertragung eines href-Parameters

>>: Den praktischen Wert der CSS-Eigenschaft *-gradient erkunden

Detailliertes grafisches Tutorial zum Herunterladen und Installieren der VirtualBox-Software sowie zum Installieren und Bereitstellen in einer Linux-Umgebung

1. Laden Sie die VirtualBox-Software herunter und...

HTML imitiert die Dropdown-Menüfunktion der Baidu-Enzyklopädienavigation

So installieren Sie pyenv unter Linux

Lösung für das Problem, dass die vertikale Zentrierung des Flex-Innenknopfs nicht zentriert ist

Korrekte Änderungsschritte für das Standardnetzwerksegment von Docker

So erstellen Sie einen Tabellenindex in MySQL

Reagieren Sie auf die Konstruktionsreihenfolge verschachtelter Komponenten

Gründe und Lösungen für die mehrfache Ausführung der Überwachungsmethode, wenn Vue Routenänderungen überwacht

Beispiel für die Verwendung von Nginx zur Implementierung eines TCP-Proxys mit Portweiterleitung

Erfahren Sie mehr über JavaScript-Iteratoren

So implementieren Sie die Docker-Volume-Montage

Beschreiben Sie kurz den Unterschied zwischen MySQL und Oracle

Artikel empfehlen

Das WeChat-Applet implementiert einen einfachen Rechner

Detaillierte Erläuterung des Implementierungsprozesses des Docker-Cross-Host-Container-Kommunikations-Overlays

Nginx verwendet Lua+Redis, um IP dynamisch zu blockieren

Webprojektentwicklung VUE-Mischungs- und Vererbungsprinzip

Detaillierte Erklärung zur Verwendung von $props, $attrs und $listeners in Vue

Einführung in die gängigen Festplattenverwaltungsbefehle von Linux

Verwenden Sie js in html, um die lokale Systemzeit abzurufen

Textarea-Tag in HTML

So implementieren Sie geplante MySQL-Aufgaben zur Datensicherung unter Linux

Detailliertes Tutorial zur Installation von MySQL 8.0.13 (rpm) auf Centos7

Detailliertes grafisches Tutorial zum Herunterladen und Installieren der VirtualBox-Software sowie zum Installieren und Bereitstellen in einer Linux-Umgebung

Detaillierte Erklärung der Dreieckszeichnung und clevere Anwendungsbeispiele in CSS

So erstellen Sie mit Docker von Grund auf ein persönliches SOLO-Blog

Verwenden Sie HTML, um eine einfache E-Mail-Vorlage zu schreiben

Implementierung von Kennwortfeld-Verifizierungsinformationen basierend auf JavaScript