CSS+HTML to realize the top navigation bar function

Implementation of navigation bar, fixed top navigation bar, and secondary menu implementation effect diagram:

insert image description here

Update 2018/11/16:
When I was using this navigation bar recently, I found that when the page was zoomed in and out, there were some minor problems with the layout and display of the navigation bar, so I re-modified the CSS code and posted it again.

New code implementation (optimized layout):

<html>
   <head>
       <style type="text/css">
        .top{
    /* Set width, height, background color */
    height: auto; /*Change the height to automatic height*/
    width:100%;
    margin-left: 0;
    background:rgb(189, 181, 181);
    position: fixed; /*Fixed at the top*/
    top: 0;/*The distance from the top is 0*/
    margin-bottom: 5px;
}
.top ul{
    /* Clear the default style of the ul tag */
    width: auto;/*The width is also changed to automatic*/
    list-style-type: none;
    white-space:nowrap;
    overflow: hidden;
    margin-left: 5%;
    /* margin-top: 0; */
    padding: 0;

}
.top li {
    float:left; /* Make the li content float horizontally, that is, arrange it horizontally*/
    margin-right:2%; /* The distance between two li s*/
    position: relative;
    overflow: hidden;
}

.top li a{
   /* Set the link content display format */
    display: block; /* Displaying the link as a block element makes the entire link area clickable*/
    color:white;
    text-align: center;
    padding: 3px;
    overflow: hidden;
    text-decoration: none; /* remove underline */
    
}
.top li a:hover{
    /* The background turns black when the mouse is selected*/
    background-color: #111;
}
.top ul li ul{
    /* Set up the secondary menu */
    margin-left: -0.2px;
    background:rgb(189, 181, 181);
    position: relative;
    display: none; /* Hide the contents of the secondary menu by default*/

}
.top ul li ul li{
    /* Display of secondary menu li content*/
    
    float:none;
    text-align: center;
}
.top ul li:hover ul{
    /* When the mouse selects the secondary menu content*/
    display: block;
}
body{
    background:#eff3f5;
}

       </style>
        <body>
            <div class="top">
                   <center> 
                    <ul>
                    <li><a href="#">First Level Menu</a></li>
                    <li><a href="#">First Level Menu</a></li>
                    <li><a href="#">First Level Menu</a></li>
                    <li><a href="#"><b>First Level Menu</b></a></li>
                    <li><a href="#">First Level Menu</a></li>
                    <li>
                        <a href="#">First level menu</a>
                        <ul>
                            <li><a href="#">Secondary Menu</a></li>
                            <li><a href="#">Secondary Menu</a></li>
                        </ul>
                    </li>        
                      </ul>
                    </center>      
            </div>
        </body>
    </head>
</html>

The original code implementation below (there is a problem with the layout of the navigation page when the page is zoomed in and out):

<html>
   <head>
       <style type="text/css">
        .top{
            /* Set width, height, background color */
            height: 50px;
            width:100%;
            background:rgb(189, 181, 181);
            position: fixed; /*Fixed at the top*/
            top: 0;/*The distance from the top is 0*/
        }
        .top ul{
            /* Clear the default style of the ul tag */
            width: 80%;
            list-style-type: none;
            margin: 0;            
            padding: 0;
            overflow: hidden;

        }
        .top li {    
            float:left; /* Make the li content float horizontally, that is, arrange it horizontally*/
            margin-right:50px; /* Distance between two li*/
        }

        .top li a{
           /* Set the link content display format */
            display: block; /* Displaying the link as a block element makes the entire link area clickable*/
            color:white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none; /* remove underline */
        }
        .top li a:hover{
            /* The background turns black when the mouse is selected*/
            background-color: #111;
        }
        .top ul li ul{
            /* Set up the secondary menu */
            width: auto;
            background:rgb(189, 181, 181);
            position: absolute;
            display: none; /* Hide the contents of the secondary menu by default*/

        }
        .top ul li ul li{
            /* Display of secondary menu li content*/
            margin-right:0;
            float:none;
            text-align: center;
        }
        .top ul li:hover ul{
            /* When the mouse selects the secondary menu content*/
            display: block;
        }
       </style>
        <body>
            <div class="top">
                   <center> 
                    <ul>
                    <li><a href="#">First Level Menu</a></li>
                    <li><a href="#">First Level Menu</a></li>
                    <li><a href="#">Episode Menu</a></li>
                    <li><a href="#"><b>First Level Menu</b></a></li>
                    <li><a href="#">First Level Menu</a></li>
                    <li>
                        <a href="#">First level menu</a>
                        <ul>
                            <li><a href="#">Secondary Menu</a></li>
                            <li><a href="#">Secondary Menu</a></li>
                        </ul>
                    </li>        
                      </ul>
                    </center>      
            </div>
        </body>
    </head>
</html>

This is the end of this article about how to use CSS+HTML to implement the top navigation bar function. For more relevant CSS top navigation bar content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: JavaScript immediate execution function usage analysis

>>: 0.1 seconds worth! A brief discussion on the problem of speeding up the front-end web pages