How To Use HTML, CSS To Implement Navigation Bar Drop-Down Menu Example

The menu bar can be used in many places, especially the menu bar with drop-down menus list. This article mainly introduces how to implement navigation bar drop-down menu list with HTML and CSS.

1. How To Use HTML, CSS To Implement Navigation Bar Drop-Down Menu Example Source Code.

  1. First, let us create an Html file implement_navigator_drop_down_menu_with_html_css.html.
  2. Copy the below Html source code into the above Html file and save it.
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Use HTML, CSS To Implement Navigation Bar Drop-Down Menu Example</title>
    <style>
    .header{
        height: 120px;
        width: 1046px;
        margin: 0 auto;
    }
    
    .header_right{
        float: right;
        height: 120px;
        position: relative;
    }
    .header_right>div{
        position: absolute;
        top: 0;
        right: 0;
    
    }
    .header_right ul{
        margin-top: 88px;
    
    }
    .header_right ul a li{
        border-right: 1px solid #000000;
        height: 13px;
        font-size: 15px;
        padding: 0 25px;
        font-weight: bold;
        color: #666;
    
    }
    .header_right ul a{
        float: left;
        line-height: 13px;
    
    }
    .header_right ul a li:hover{
        color: #aa0000;
    }
    .header_right ul a:last-child li{/* remove the last border */
        border: none;
    }
    .show_list{
        position: relative;
    }
    .show_list .move_list{
        display: none;
        z-index: 103;
        position: absolute;
        top: -56px;
        left: 0;
        width: 100%;
        background: #333;
        text-align: center;
    }
    .show_list .move_list li{
        padding: 10px 0;
        width: 114px;
        color: #fff;
    }
    .header_right ul a .show_list{
        padding-bottom: 20px;
        border-right: none;
    }
    .show_list:hover .move_list{
        display: block;
    }
    .header_right ul a:nth-child(3){
        border-left: 1px solid #000;
    }
    .show_list .move_list li:hover{
        color: white;
        background: orange;
    }
    
    
    * {
        margin: 0;
        padding: 0
    }
    em,i {
        font-style: normal
    }
    li {
        list-style: none
    }
    a{
        font: 14px/24px Microsoft YaHei,Arial,\\5B8B\4F53,Arial Narrow;
        letter-spacing: 1.2px;
        color: #666;
        text-decoration: none
    }
    a:hover {
        color: #c81623 ;
    }
    
    img {
        border: 0;
        vertical-align: middle
    }
    input{
        outline: none;
    }
    button {
        cursor: pointer;
        border:none;
        outline: none;
    }
    
    </style>
    </head>
    <body>
    <header class="header">
            <div class="header_right">
                    <ul>             
                        <a href="#">
                            <li class="show_list">
                                <span>Language</span>
                                    <ul class="move_list">
                                        <li>Python</li>
                                        <li>Java</li>
                                        <li>JavaScript</li>
                                        <li>C++</li>
                                        <li>Html</li>
                                    </ul>
                            </li>
                        </a>
                 
                    </ul>
            </div>
    </header>
    </body>
    </html>
  3. Open the above Html file in a web browser, then you can get the below web page, when you move your mouse over the menu Language, it will show the drop-down menu list below it.
    html_css_implement_navigation_drop_down_menu

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Clicky