HTML+CSS实现导航条下拉菜单源代码

2022-02-15 17:56:06 分类：html 阅读()
菜单栏在很多地方都可以用到，尤其是带下拉的菜单栏，本文主要介绍了HTML+CSS实现导航条下拉菜单

效果

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

image.png

下拉菜单HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
12
23
24
25
26
27
        
            
        
        
                
                    
                
                
                        
  • 首页
    •                     
  •                     
  • 我要设计
    •                     
  • 在线咨询
    •                     
  • 会员注册
    •                     
  • 会员登录
    •                 
            
        

    下拉菜单CSS代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    .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的重置代码，代码如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    2
    * {
        margin: 0;
        padding: 0
    }
    em,i {
        font-style: normal
    }
    li {
        list-style: none
    }
    a{
        font: 14px/24px Microsoft YaHei,Arial,\5B8B4F53,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;
    }



    郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

    标签：

    相关文章阅读

  • hack.css,css hack是什么意思
  • hack.css,css hack是什么意思,CSS hack用法案例详解
  • css绘制直角三角形,css3怎么画三角形
  • css绘制直角三角形,css3怎么画三角形,纯CSS绘制三角形（各种角度）
  • css实现的对联广告代码是什么,css实现的对联广告代码是多少
  • css实现的对联广告代码是什么,css实现的对联广告代码是多少,css实现的对联广告代码
  • css实现滚动条,div设置滚动条样式
  • css实现滚动条,div设置滚动条样式,CSS自定义滚动条样式案例详解
  • ,,js+css实现的圆角边框TAB选项卡滑动门代码分享（2款）
  • ,,vue自适应布局postcss-px2rem详解
  • 单行文本溢出省略号,css多行文字溢出打点
  • css布局position详解,css里面的position
  • css盒子右对齐,css中两个盒子并列
  • html table宽度自适应,css设置table行高
  • 网页css选择器,web前端开发css
    • 留言与评论（共有 条评论）
       
    验证码：