利用html实现一个三级菜单

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

（推荐教程：html教程）

完整代码：

立即学习“前端免费学习笔记（深入）”；

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实现一个三级菜单的详细内容，更多请关注【创想鸟】其它相关文章！