HTML+CSS实现导航条下拉菜单的示例代码

效果

代码中的图片可以自己换的

下拉菜单HTML代码

header class="header">
            div class="header_left">
                img src="img/LOGo.jpg">
            /div>
            div class="header_right">
                    div class="number_right">
                        img src="img/number.jpg">
                    /div>
                    ul>
                        a href="#">
    li>
    首页/li>
    /a>
                        a href="#">
    li class="show_list">
                            span>
    成功案例/span>
                            ul class="move_list">
                                li>
    品牌设计/li>
                                li>
    网页设计/li>
                                li>
    平面设计/li>
                                li>
    电子商城/li>
                                li>
    空间/建筑/li>
                            /ul>
                        /li>
    /a>
                        a href="#">
    li>
    我要设计/li>
    /a>
                        a href="#">
    li>
    在线咨询/li>
    /a>
                        a href="#">
    li>
    会员注册/li>
    /a>
                        a href="#">
    li>
    会员登录/li>
    /a>
                    /ul>
            /div>
        /header>
    

下拉菜单CSS代码

.header{
        height: 120px;
        width: 1046px;
        margin: 0 auto;
}
.header_left{
        float: left;
        line-height: 120px;
}
.header_left img{
        width: 300px;
        height: 100px;
}
.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: #000000;
}
.header_right ul a:last-child li{
    /*去掉最后的边框*/    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;
}
    

在写完上述代码的同时须加上css的重置代码，代码如下：

* {
        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;
}
    

到此这篇关于HTML+CSS实现导航条下拉菜单的示例代码的文章就介绍到这了,更多相关HTML+CSS导航条下拉菜单内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！