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>
    <meta charset="UTF-8">
    <title>Use HTML, CSS To Implement Navigation Bar Drop-Down Menu Example</title>
        height: 120px;
        width: 1046px;
        margin: 0 auto;
        float: right;
        height: 120px;
        position: relative;
        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;
        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
        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
        outline: none;
    button {
        cursor: pointer;
        outline: none;
    <header class="header">
            <div class="header_right">
                        <a href="#">
                            <li class="show_list">
                                    <ul class="move_list">
  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.

Leave a Comment

Your email address will not be published. Required fields are marked *

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