CSS + HTML to realize the function of top navigation bar

Time:2022-5-5

Implementation of navigation bar, fixed top navigation bar and secondary menu
design sketch:

在这里插入图片描述

Update on November 16, 2018:
Recently, when using this navigation bar, I found some small problems in the layout and display of the navigation bar when the page is zoomed in and out, so I changed the code of CSS and pasted it again

New code implementation (optimized layout):

<html>
   <head>
       <style type="text/css">
        .top{
    /*Set width height background color*/
    height: auto; /* Change height to automatic height*/
    width:100%;
    margin-left: 0;
    background:rgb(189, 181, 181);
    position: fixed; /* Fixed on top*/
    top: 0;/* The distance from the top is 0*/
    margin-bottom: 5px;
}
.top ul{
    /*Clear the default style for UL labels*/
    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 Li content float horizontally, that is, arrange horizontally*/
    margin-right:2%;  /*  Distance between two Li*/
    position: relative;
    overflow: hidden;
}

.top li a{
   /*Format the display of linked content*/
    display: block; /*  Displaying links as block elements 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 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 contents*/
    
    float:none;
    text-align: center;
}
.top ul li:hover ul{
    /*When the mouse selects the content of the secondary menu*/
    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 following is the original code implementation (there is a problem with the navigation layout 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 on top*/
            top: 0;/* The distance from the top is 0*/
        }
        .top ul{
            /*Clear the default style for UL labels*/
            width: 80%;
            list-style-type: none;
            margin: 0;            
            padding: 0;
            overflow: hidden;

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

        .top li a{
           /*Format the display of linked content*/
            display: block; /*  Displaying links as block elements 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 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 contents*/
            margin-right:0;
            float:none;
            text-align: center;
        }
        .top ul li:hover ul{
            /*When the mouse selects the content of the secondary menu*/
            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 = "#" > one 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 CSS + HTML to realize the top navigation bar function. For more relevant CSS top navigation bar content, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!