一，垂直菜单的实现
<！DOCTYPE html> <html> <head> <meta charset =“ UTF-8”> <title> </ title> <link href =“ app.css” rel =“ stylesheet” /> <script src =“ jquery -1.10.1.min.js“> </ script> <script src =” app.js“> </ script> </ head> <body> <ul> <li class =” main“> <a href = “＃”>菜单1 </a> <ul> <li> <a href="#">子菜单1 </a> </ li> <li> <a href="#">子菜单2 < / a> </ li> </ ul> </ li> <li class =“ main”> <a href="#">菜单2 </a> <ul> <li> <a href =“＃” >子菜单1 </a> </ li> <li> <a href="#">子菜单2 </a> </ li> </ ul> </ li> <li class =“ main”> <a href="#">菜单3 </a> <ul> <li> <a href="#">子菜单1 </a> </ li> <li> <a href="#">子菜单2 </a> </ li> </ ul> </ li> </ ul> </ body> </ html>
ul，li {list-style：none;} ul {padding：0; margin：0;}。main {background-color：＃666666; 背景重复：repeat-x; 宽度：100像素；} li {背景颜色：#eeeeee；} a {文本修饰：无；padding-left：20px; 显示：块；宽度：80px；padding-top：3像素；padding-bottom：3px;}。main a {color：white;}。main li a {color：black;}。main ul {display：none;}
$（document）.ready（function（）{$（“。main> a”）。click（function（）{var ulNode = $（this）.next（“ ul”）; ulNode.toggle（“ normal”） ;}）;}）;
二，水平菜单的实现
<！DOCTYPE html> <html> <head> <meta charset =“ UTF-8”> <title> </ title> <link href =“ app.css” rel =“ stylesheet” /> <script src =“ jquery -1.10.1.min.js“> </ script> <script src =” app.js“> </ script> </ head> <body> <ul> <li class =” main“> <a href = “＃”>菜单1 </a> <ul> <li> <a href="#">子菜单1 </a> </ li> <li> <a href="#">子菜单2 < / a> </ li> </ ul> </ li> <li class =“ main”> <a href="#">菜单2 </a> <ul> <li> <a href =“＃” >子菜单1 </a> </ li> <li> <a href="#">子菜单2 </a> </ li> </ ul> </ li> <li class =“ main”> <a href="#">菜单3 </a> <ul> <li> <a href="#">子菜单1 </a> </ li> <li> <a href="#">子菜单2 </a> </ li> </ ul> </ li> </ ul> <br /> <br /> <br /> <br /> <br /> <br /> <ul> <li class =“ hmain”> <a href="#">菜单1 </a> <ul> <li> <a href="#">子菜单1 </a> </ li> <li> <a href="#">子菜单2 </a> </ li> </ ul> </ li> </ li> <li class =“ hmain”> <a href="#">菜单2 </a> <ul> <li> <a href="#">子菜单1 </a> </ li> <li> <a href="#">子菜单2 </a> < / li></ ul> </ li> <li class =“ hmain”> <a href="#">菜单3 </a> <ul> <li> <a href="#">子菜单1 </ a > </ li> <li> <a href="#">子菜单2 </a> </ li> </ ul> </ li> </ ul> </ body> </ html>
ul，li {list-style：none;} ul {padding：0; margin：0;}。main，.hmain {background-color：＃666666; 背景重复：repeat-x; 宽度：100像素；} li {背景颜色：#eeeeee；} a {文本修饰：无；padding-left：20px; 显示：块；宽度：80px；padding-top：3像素；padding-bottom：3px;}。main a，.hmain a {color：white;}。main li a，.hmain li a {color：black;}。main ul，.hmain ul {display：none;}。hmain { 向左飘浮; 右边距：1px；}。main {边距：1px;}
$（document）.ready（function（）{$（“。main> a”）。click（function（）{var ulNode = $（this）.next（“ ul”）; ulNode.toggle（“ normal”） ;}）; $（“。hmain”）。hover（function（）{$（this）.children（“ ul”）。slideDown（）;}，function（）{$（this）.children（“ ul” ）。向上滑动（）; }）;}）;
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jQuery