一个精美的前台模板源码（三级菜单）

引言：由于项目的需要，我自行设计了一个精美的三级菜单显示模板，感觉做的还不错，特意把源码分享一下。

---

1、jsp主体代码

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>

    

中国教学质量管理与诊断平台

     高职高专院校指定的的基于web的教学质量管理诊断平台 搜索

 

            

                    

                        

                         
• 部门概况▼
                              
  
                              
  • 菜单一
  
                               
  • 菜单二
  
                               
  • 菜单三
  
                               
  • 菜单四▶
                                          
    
                                            
    • 菜单一
    
                                             
    • 菜单二
    
                                             
    • 菜单三
    
                                             
    • 菜单四
    
                                        
             
                                 
  
                              
  
                           

                         
                         
• 政策文件▼

                         
                         
• 教学与质量管理体系▼
                               
  
                                  
  • 学院教学质量管理▶
                                     
  • 分院教学质量管理▶
                                          
    
                                            
    • 动物科技分院
    
                                             
    • 园林科技分院
    
                                             
    • 生物科技分院
    
                                             
    • 农业工程分院
    
                                             
    • 信息技术分院
    
                                             
    • 经济贸易分院
    
                                             
    • 人文教育分院
    
                                               
    • 国际合作分院
    
                                        
             
                                 
  
                              
  
                           

                         
                         
• 精品课程▼

                         
                         
• 精选视频▼               
                               
  
                              
  • 菜单一
  
                           
  • 菜单二
  
                               
  • 菜单三
  
                               
  • 菜单四▶
                                      
    
                                            
    • 菜单一
    
                                             
    • 菜单二
    
                                             
    • 菜单三
    
                                             
    • 菜单四
    
                                        
             
                                 
  
                              
               
                           
    
                         
                         
• 视频反馈▼  
                           
• 研究动态▼    
                           
• 留言板▼                                                    
                      

                    
            

    

author:李庆照

    

div2

    

    
        

            

                

登录

            

            

                

                
                    

                
                        
• 
                              账    号:
                          

                        
• 
                              密    码:
                          

                        
                    

                    

                        
                        
                    

                    
                

            

        

    

    
    
    
    
    
    
    
    
    

关于我们	友情链接
校企合作企业	江苏海事职业技术学院
主办单位:南京龙渊微电子科技公司	联系我们
单位地址:江苏省南京市江宁区南佑路将军大道千人大厦	友情链接
客服热线：010-82199588	招聘信息
客服邮箱：kefu#chsi.com.cn（将#替换为@）	龙渊重创
京ICP备09057757号	中介信息
京公网安备110402430099号	帮助中心

---

2、css

@charset "UTF-8";
/* 初始化CSS */
*{
    margin:0;
    padding:0;
}
body {
background: #F1F1F1;
color: #333333;
text-align: left;
font: 14px/25px "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", HELVETICA;
}
.father{
    position:realative;
    width:1024px;
    margin: 0 auto;
    border: 1px solid #E6E6E6;
    height:auto;
}
.header{
    width: 1024px;
    height:100px;
    background: #FFFFFF;
}
#header_t{
    font-size:24px;
    font-family:"宋体";
    font-weight:bold;
    padding-top:20px;
    padding-left:20px;
    vetical-align:middle;
}
#header_t b{color:#2EAFBB;font-size:12px;}
#header_t button{background:#2EAFBB;color:#fff;font-size:12px;width:40px; height:23px;font-family:"宋体";}
#header_t input{margin-left:400px;border: 1px solid #E6E6E6;}
.content{
    margin-top:40px;
    background: #FFFFFF;
    width: 1024px;
    border: 1px solid #E6E6E6;
    font-size: 12px;
    line-height: 24px;
    zoom:1;
    clear:both;
    
}

#c_left{
    width:36%;
    float:left;
    background: #FFFFFF;
    height:800px;
    border: 1px solid #E6E6E6;
}
#c_middle{
    width:40%;
    float:left;
    margin-left:6px;
        height:800px;
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
}
 #c_right{
    width:22%;
    margin-left:6px;
    float:left;
    height:800px;
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
}

a{text-decoration: none;color: #fff;}
.first{height: 30px;line-height: 30px;background: #2EAFBB;text-align: center; margin-top:0px;padding-right:15px ;}
.first li{list-style-type: none;position: relative;float: left;}
.first li a{display: block;height: 30px;width:70px;float: left;margin-left: 12px;}
.first li ul{position: absolute;display: none;}
.second{top: 30px;}
.second li a{width:80px;background:#2EAFBB;}
.second li a:hover{width: 80px;background:#2EAFBB;}
.third{left:80px;}
#navlist4 li a{width:130px;}
/*.first>li:hover>ul {display: block;}
.first>li:hover>ul >li:hover >ul{display: block;}*/
.nav >div{position: relative;float: left;left: 50%;}
.nav >div>ul{position: relative;float: left;left:-50%;}

 

 .foot{padding:10px;width:1010px;height:230px;zoom:1;background:#2EAFBB;clear:both;border: 1px solid #E6E6E6;font-size:14px;margin-top:40px;position:relative;top:20px;}
/*#foot_left{float:left;width:40%;background:#2EAFBB;color:#fff;}
#foot_right{float:left;width:49%;;background:#2EAFBB;color:#fff;} */
 a:visited{color:#fff}
 a:hover{color:#000;}

#f_content{
    width:1000px;
    margin:0 auto;
    background:#2EAFBB;
    color:#fff;
    font-size:12px;
}

 

/*表单登陆*/
#login_dialog {background-color:#2EAFBB;width: 100%;height:200px;font-family: "黑体";/*禁止复制粘贴*/-moz-user-select: none;-webkit-user-select: none;user-select:none;}
.register_dialog_title {height: 35px;line-height: 35px;margin: 0 5px;}
.register_dialog_info {margin:0 auto;text-align:left;color: #fff;font-size:18px;}         
form{padding:8px;}
ul li {list-style: none;line-height:20px;}
.sub input {width: 50px;background-color: rgb(255, 109, 11); margin-left:25px;color: rgb(255, 255, 255);font-size: 12px;height: 30px;font-family: 黑体;}
input[type = "submit"]:hover{cursor: pointer;}
.admin_username{width:140px; height:20px;}
.admin_pwd{width:140px; height:20px;}
.reg-box li { line-height: 44px;font-size:14px;}
        

---

3、效果图

---

---

---

ok，还不错吧。