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

Realisieren Sie die Breadcrumb-Funktion basierend auf den Matched-Daten des Vue-Routers

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

Realisieren Sie die Breadcrumb-Funktion basierend auf den Matched-Daten des Vue-Routers

Detaillierte Erklärung zum Ändern des Standardports von nginx

Hinweise zu den Formularkomponenten des Elements

Löschvorgang für Docker-Volumes

CSS Skills Collection – Klassiker unter den Klassikern

Methoden zur Optimierung von Oracle-Datenbanken mit großen Speicherseiten unter Linux

Vue verwendet Canvas-Handschrifteingabe, um Chinesisch zu erkennen

Detaillierte Erklärung zum Anpassen des Stils von CSS-Bildlaufleisten

Optionsfelder und Multiple-Choice-Schaltflächen werden mit Bildern gestaltet

Eine kurze Einführung in die Basiskomponenten der VUE uni-app

Artikel empfehlen

Detaillierte Erklärung des HTML-Seitenkopfcodebeispiels

Tutorial zur Konfiguration der kostenlosen MySQL-Installationsversion

Implementierung von MySQL Multi-version Concurrency Control MVCC

Detaillierte Erklärung der grep- und egrep-Befehle in Linux

Layui table wählt das Optionsfeld der angegebenen Zeile aus und scrollt zum Implementierungscode der Zeile

Reiner CSS-Header, korrigierter Implementierungscode

Das native VIDEO-Tag der HTML-Seite verbirgt die Download-Button-Funktion

Schritte zur Installation von MySQL 5.7 im Binärmodus und zur Optimierung des Systems unter Linux

Sprechen Sie über wichtige Unterverzeichnisprobleme im Linux-System

MySql fügt Daten erfolgreich ein, meldet aber [Err] 1055 Fehlerlösung

Ausführliche Erläuterung der MySQL-Lern-Engine, Erläuterungen und Berechtigungen

Eine kurze Diskussion über die Ungültigkeitserklärung oder implizite Konvertierung von MySQL-Integer- und String-Indizes

Detaillierte Erläuterung der nahtlosen horizontalen LVM-Festplattenerweiterung basierend auf Linux

Vergleichstabelle für chinesische und englische Dateinamen der Founder-Schriftbibliothek

MySQL 5.7.17 Winx64 Installations- und Konfigurations-Tutorial