当前位置 博文首页 > HTML+CSS实现导航条下拉菜单的示例代码

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

    作者:Echo...... 时间:2021-07-28 18:04

    效果

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

    在这里插入图片描述

    下拉菜单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;
    }
    jsjswy
    下一篇:没有了