CSS+HTML zur Realisierung der Funktion der oberen Navigationsleiste

Implementierungseffektdiagramm für die Navigationsleiste, die feste obere Navigationsleiste und das sekundäre Menü:

Bildbeschreibung hier einfügen

Aktualisierung 16.11.2018:
Als ich diese Navigationsleiste kürzlich verwendet habe, habe ich festgestellt, dass es beim Vergrößern und Verkleinern der Seite kleinere Probleme mit dem Layout und der Anzeige der Navigationsleiste gab. Daher habe ich den CSS-Code erneut geändert und ihn noch einmal gepostet.

Neue Code-Implementierung (optimiertes Layout):

<html>
   <Kopf>
       <style type="text/css">
        .Spitze{
    /* Breite, Höhe, Hintergrundfarbe festlegen */
    height: auto; /*Ändere die Höhe auf automatische Höhe*/
    Breite: 100 %;
    Rand links: 0;
    Hintergrund: RGB (189, 181, 181);
    Position: fest; /*Oben fixiert*/
    top: 0;/*Der Abstand von oben beträgt 0*/
    Rand unten: 5px;
}
.top ul{
    /* Löscht den Standardstil des ul-Tags */
    width: auto;/*Die Breite wird ebenfalls auf automatisch geändert*/
    Listenstiltyp: keiner;
    Leerzeichen:nowrap;
    Überlauf: versteckt;
    Rand links: 5 %;
    /* oberer Rand: 0; */
    Polsterung: 0;

}
.top li {
    float:left; /* Lassen Sie den li-Inhalt horizontal schweben, d. h. ordnen Sie ihn horizontal an*/
    margin-right:2%; /* Der Abstand zwischen zwei Linien*/
    Position: relativ;
    Überlauf: versteckt;
}

.top li a{
   /* Anzeigeformat für Linkinhalte festlegen */
    display: block; /*Durch die Darstellung des Links als Blockelement wird der gesamte Linkbereich anklickbar*/
    Farbe: weiß;
    Textausrichtung: zentriert;
    Polsterung: 3px;
    Überlauf: versteckt;
    Textdekoration: keine; /* Unterstreichung entfernen */
    
}
.top li a:hover{
    /* Der Hintergrund wird schwarz, wenn die Maus ausgewählt wird*/
    Hintergrundfarbe: #111;
}
.top ul li ul{
    /* Sekundäres Menü einrichten */
    Rand links: -0,2px;
    Hintergrund: RGB (189, 181, 181);
    Position: relativ;
    Anzeige: keine; /* Den Inhalt des sekundären Menüs standardmäßig ausblenden*/

}
.top ul li ul li{
    /* Anzeige des Inhalts des sekundären Menüs li*/
    
    Schwimmer: keine;
    Textausrichtung: zentriert;
}
.top ul li:hover ul{
    /* Wenn die Maus den Inhalt des sekundären Menüs auswählt*/
    Anzeige: Block;
}
Körper{
    Hintergrund: #eff3f5;
}

       </Stil>
        <Text>
            <div Klasse="oben">
                   <Mitte> 
                    <ul>
                    <li><a href="#">Menü der ersten Ebene</a></li>
                    <li><a href="#">Menü der ersten Ebene</a></li>
                    <li><a href="#">Menü der ersten Ebene</a></li>
                    <li><a href="#"><b>Menü der ersten Ebene</b></a></li>
                    <li><a href="#">Menü der ersten Ebene</a></li>
                    <li>
                        <a href="#">Menü der ersten Ebene</a>
                        <ul>
                            <li><a href="#">Sekundäres Menü</a></li>
                            <li><a href="#">Sekundäres Menü</a></li>
                        </ul>
                    </li>        
                      </ul>
                    </center>      
            </div>
        </body>
    </Kopf>
</html>

Unten sehen Sie die ursprüngliche Codeimplementierung (beim Layout der Navigationsseite tritt ein Problem auf, wenn die Seite vergrößert oder verkleinert wird):

<html>
   <Kopf>
       <style type="text/css">
        .Spitze{
            /* Breite, Höhe, Hintergrundfarbe festlegen */
            Höhe: 50px;
            Breite: 100 %;
            Hintergrund: RGB (189, 181, 181);
            Position: fest; /*Oben fixiert*/
            top: 0;/*Der Abstand von oben beträgt 0*/
        }
        .top ul{
            /* Löscht den Standardstil des ul-Tags */
            Breite: 80%;
            Listenstiltyp: keiner;
            Rand: 0;            
            Polsterung: 0;
            Überlauf: versteckt;

        }
        .top li {    
            float:left; /* Lassen Sie den li-Inhalt horizontal schweben, d. h. ordnen Sie ihn horizontal an*/
            margin-right:50px; /* Abstand zwischen zwei Zeilen*/
        }

        .top li a{
           /* Anzeigeformat für Linkinhalte festlegen */
            display: block; /*Durch die Darstellung des Links als Blockelement wird der gesamte Linkbereich anklickbar*/
            Farbe: weiß;
            Textausrichtung: zentriert;
            Polsterung: 14px 16px;
            Textdekoration: keine; /* Unterstreichung entfernen */
        }
        .top li a:hover{
            /* Der Hintergrund wird schwarz, wenn die Maus ausgewählt wird*/
            Hintergrundfarbe: #111;
        }
        .top ul li ul{
            /* Sekundäres Menü einrichten */
            Breite: automatisch;
            Hintergrund: RGB (189, 181, 181);
            Position: absolut;
            Anzeige: keine; /* Den Inhalt des sekundären Menüs standardmäßig ausblenden*/

        }
        .top ul li ul li{
            /* Anzeige des Inhalts des sekundären Menüs li*/
            Rand rechts: 0;
            Schwimmer: keine;
            Textausrichtung: zentriert;
        }
        .top ul li:hover ul{
            /* Wenn die Maus den Inhalt des sekundären Menüs auswählt*/
            Anzeige: Block;
        }
       </Stil>
        <Text>
            <div Klasse="oben">
                   <Mitte> 
                    <ul>
                    <li><a href="#">Menü der ersten Ebene</a></li>
                    <li><a href="#">Menü der ersten Ebene</a></li>
                    <li><a href="#">Episodenmenü</a></li>
                    <li><a href="#"><b>Menü der ersten Ebene</b></a></li>
                    <li><a href="#">Menü der ersten Ebene</a></li>
                    <li>
                        <a href="#">Menü der ersten Ebene</a>
                        <ul>
                            <li><a href="#">Sekundäres Menü</a></li>
                            <li><a href="#">Sekundäres Menü</a></li>
                        </ul>
                    </li>        
                      </ul>
                    </center>      
            </div>
        </body>
    </Kopf>
</html>

Dies ist das Ende dieses Artikels über die Verwendung von CSS+HTML zur Implementierung der Funktion der oberen Navigationsleiste. Weitere relevante CSS-Inhalte zur oberen Navigationsleiste finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Analyse der Verwendung der Funktion zur sofortigen Ausführung in JavaScript

>>: 0,1 Sekunden wert! Eine kurze Diskussion über das Problem der Beschleunigung der Front-End-Webseiten

JavaScript zur einfachen Verknüpfung von Provinzen und Gemeinden

CSS+HTML zur Realisierung der Funktion der oberen Navigationsleiste

JavaScript zur einfachen Verknüpfung von Provinzen und Gemeinden

CSS erzielt den Effekt, mehrere Elemente an beiden Enden in einer Box auszurichten

MySQL verwendet frm-Dateien und ibd-Dateien, um Tabellendaten wiederherzustellen

So zeigen Sie den Startparameterbefehl „Docker Run“ an (empfohlen)

Eine kurze Analyse zum besten Umgang mit vergessenen MySQL 8-Passwörtern

Das WeChat-Applet Uniapp realisiert den Löscheffekt durch Wischen nach links (vollständiger Code)

Anwendung von CSS3-Animationseffekten in Aktivitätsseiten

Zusammenfassung der Methode von React zum Erstellen von Komponenten

js implementiert das Popup-Anmeldefeld durch Klicken auf das Popup-Fenster

Eine kurze Analyse der startReactApplication-Methode von React Native

Artikel empfehlen

Die große Rolle von HTML-Meta

So handhaben Sie Bilder in Vue-Formularen

Lösung für das Problem, dass bei der Installation von Centos7 mit VmWare kein Zugriff auf das Internet möglich ist

Eine schnelle Lösung für das Problem des automatischen Zeilenumbruchs in Tabellenüberschriften im Responsive Framework

HTML validieren HTML-Validierung

Detaillierte Erläuterung der am häufigsten verwendeten Image-Befehle und Container-Befehle von Docker

Vue + Element zur dynamischen Anzeige von Hintergrunddaten zu Optionen

Gängige Methoden der Vue-Komponentenbildung: Übertragung und Kommunikation von Komponentenwerten

Installieren Sie Jenkins mit Docker und lösen Sie das Problem des anfänglichen Plugin-Installationsfehlers

Beispiel für das Schreiben von mobilem H5 zum Aufrufen einer APP (IOS, Android)

Detailliertes Tutorial zur Verwendung des Prettier Code-Plugins in vscode

Detaillierte Erläuterung der Clientkonfiguration für die Entwicklung von vue3 + electron12 + dll

Lösung für das Problem „Tabelle mysql.plugin existiert nicht“ beim Deployment von MySQL

React implementiert den Beispielcode der Radiokomponente

Umfassende Zusammenfassung zu MySQL GTID