如何使用HTML、CSS来实现导航栏的下拉菜单示例菜单栏可以用在很多地方，尤其是带下拉菜单列表的菜单栏。本文主要介绍了如

菜单栏可以用在很多地方，尤其是带下拉菜单列表的菜单栏。本文主要介绍了如何用HTML和CSS实现导航栏下拉菜单列表。

1.如何用HTML、CSS来实现导航栏下拉菜单示例源代码

首先，让我们创建一个Html文件implement_navigator_drop_down_menu_with_html_css.html。

将下面的Html源代码复制到上述Html文件中并保存。

<!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>

在浏览器中打开上述Html文件，就可以得到下面的网页，当你把鼠标移到菜单语言上时，就会在它下面显示下拉菜单列表。