jQuery实现三级菜单的代码_jquery

上周新接手一个网站建设的活儿，其中有需要要jquery代码实现三级菜单的需求，其实说难也不难，下面小编把代码分享给大家，供大家参考。

先给大家展示下效果图，如果大家感觉还不错的话，请参考实现代码。

HTML代码：

 
 


首页 


JavaScript+ 

 

语文 

 
英语
 

 
课程大厅
 

学习中心+ 


JavaScript+ 

 

语文 

 
英语
 

 
帮助
 

 
 

js代码：

css代码：

*{ 
padding:0; 
margin:0; 
} 
/*一级菜单*/ 
.navMenu { 
width:570px; 
margin:0 auto; 
} 
.navMenu ul li{ 
float: left; 
position: relative; 
} 
li{ 
list-style: none; 
background-color: #eee; 
width: 140px; 
height: 40px; 
text-align: center; 
margin-right: 2px; 
margin-bottom: 2px; 
} 
ul li a{ 
line-height: 40px; 
text-align: center; 
font-size: 20px; 
color: #000; 
text-decoration: none; 
display: block; 
padding:0 10px; 
} 
/*二级菜单*/ 
.navMenu ul li ul { 
display: none; 
position:absolute; 
left: 0; 
top:0; 
margin-top:42px; 
} 
.navMenu ul li ul li{ 
float:none; 
} 
/*三级菜单*/ 
.navMenu ul li ul li ul{ 
display: none; 
left:140px; 
top:-42px; 
} 

以上内容是小编给大家介绍的jQuery实现三级菜单的代码，希望对大家有所帮助！