• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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导航条下拉菜单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

    上一篇:纯html+css实现打字效果
    下一篇:纯html+css实现奥运五环的示例代码
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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