利用html实现一个三级菜单

利用html实现一个三级菜单

首先我们先来看一下效果图:

(推荐教程:html教程)

ecec85cd1e4c11c2e1209e5346aa997.png

完整代码:

立即学习“前端免费学习笔记(深入)”;

nbsp;html>                 下拉菜单    /*重置浏览器默认样式*/    * {        padding: 0;        margin: 0;        font-family: "Microsoft YaHei";        list-style: none;    }     #main {        width: 100%;        background: #3c3c3c;    }     /* 清楚浮动,使div盒子能被撑起来 */    .clearfix:after {        content: "";        display: block;        height: 0;        visibility: hidden;        overflow: hidden;        clear: both;    }     .menu {        position: relative;        margin-left: 8%;    }     /* 每一个li标签的样式 */    .menu li {        width: 130px;        height: 40px;        /* 行内高度 */        line-height: 40px;        /* 文字居中 */        text-align: center;        margin-left: 4%;    }     .menu>li a {        text-decoration: none;        color: #2aabd2;    }     .menu>li {        /*让一级菜单的li浮动*/        float: left;    }     /* 二级菜单样式 */    .second-menu {        /* 将二级菜单隐藏 */        display: none;        position: absolute;    }     /* hover属性,鼠标移动到li标签上触发,将对应li标签的耳机菜单显示,移开后恢复到原来样式 */    .menu li:hover>ul {        display: block;    }     .second-menu li a {        color: #0c0c0c;    }     .second-menu {        background: #5a5959;    }     /* 三级标签样式 */    .third-menu {        display: none;        background: #5a5959;        position: absolute;        /* 相对于其父标签(二级标签)进行绝对定位 */        margin-left: 125px;        margin-top: -40px;    }     /* 三级菜单下的 a标签文字颜色 */    .third-menu li a {        color: #54afec;    }     .second-menu li:hover ul {        display: block;    }     
        
                
  •                 联系我们            
  •             
  •                 公司掠影                
                          
    •                         版权声明                        
                                    
      •                                 1                            
      •                             
      •                                 2                            
      •                             
      •                                 3                            
      •                         
                          
    •                         在线留言                        
                                    
      •                                 1                            
      •                             
      •                                 2                            
      •                             
      •                                 3                            
      •                         
                          
    •                     
    •                         技术支持                        
                                    
      •                                 1                            
      •                             
      •                                 2                            
      •                             
      •                                 3                            
      •                         
                          
    •             
  •         
                
  •             新闻中心            
                      
    •                     版权声明                    
                                
      •                             1                        
      •                         
      •                             2                        
      •                         
      •                             3                        
      •                     
                      
    •                     在线留言                    
                                
      •                             1                        
      •                         
      •                             2                        
      •                         
      •                             3                        
      •                     
                      
    •                 
    •                     技术支持                    
                                
      •                             1                        
      •                         
      •                             2                        
      •                         
      •                             3                        
      •                     
                      
    •             
            
  •         
  •             版权声明        
  •         
  •             在线留言            
                      
    •                     版权声明                    
                                
      •                             1                        
      •                         
      •                             2                        
      •                         
      •                             3                        
      •                     
                      
    •                     在线留言                    
                                
      •                             1                        
      •                         
      •                             2                        
      •                         
      •                             3                        
      •                     
                      
    •                 
    •                     技术支持                    
                                
      •                             1                        
      •                         
      •                             2                        
      •                         
      •                             3                        
      •                     
                      
    •             
            
  •         
  • 技术支持
  •             
     

    登录后复制

    以上就是利用html实现一个三级菜单的详细内容,更多请关注【创想鸟】其它相关文章!

    版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

    发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2826181.html

    (0)
    上一篇 2025年3月9日 03:03:16
    下一篇 2025年2月28日 15:31:13

    AD推荐 黄金广告位招租... 更多推荐

    相关推荐

    发表回复

    登录后才能评论