利用Jquery实现二级下拉菜单

     最近在学习前端的内容：看到别人做的二级菜单挺好看的。下载别人的Demo看起来比较麻烦，所以就尝试了自己做一个简单二级下拉菜单：

效果图如下：

下拉菜单实现后的效果图：

没有做什么美化，只是从功能上实现下拉菜单

HTML代码：

	
	
	
	



   

         
        

        
        
        
        
        

          
          

        	

                
首 页
                 

                 

                 
关于 
                 
内容 
                 
注册
                 
帐号 
                 
	
                 
                
                
注册
                

                 

                 
first 
                 
second 
                 
third
                 
four 
                 
	
                 
                
                
登录
                

                 

                 
first 
                 
second 
                 
third
                 
four 
                 
	
                 
                
                
编码

                 

                 
first 
                 
second 
                 
third
                 
four 
                 
	
                 
                
                
关于
                

                 

                 
first 
                 
second 
                 
third
                 
four 
                 
	
                 
                
                
文档
                

                 

                 
first 
                 
second 
                 
third
                 
four 
                 
	
                 
                
        	
           
           
        
        
   
   

样式表CSS:

body{font-size:14px;background-color:white;line-height:20px;}
/* header css*/
#header{margin:0 auto;height:70px;width:90%;background-color:#fdf6e3;}
   .headerwrapper{width:960px;margin:0 auto;background-color:#fdf6e3;}
       .logo{width:20%;float:left;height:60px;}
       .nav{width:70%;float:left;height:60px;}
         /*.navbar{margin:0 auto;height:60px;position:fixed;}*/
           ul{display:block;font-size:20px;cursor: pointer;}
           li{list-style:none;float:left;width:80px;text-indent:10px;}
           li a{text-decoration: none;}
           a:hover{margin-top:10px;color:blue;background-color: yellow;}
         .listview{margin-left:-47px;display:none;background-color:pink;}
           .listview ul{cursor:pointer;width :100px;}
          .listview li {list-style:none;padding-top:3px;background-color: gray;}
        .listview li a:hover{margin-top:10px;background-color:yellow;font-size:24px;}

/* container css*/
#container{margin:20px auto;width:80%;h}
/* footer css*/
#footer{ margin:20px auto;width:85%;}
 
  
 
  
 
  
 
  
 其中主要的功能性JQUery代码为： 
  
 
  

 
  
这是我在学习过程中自己写的一个demo,不足之处希望各位指教，