菜单的点击打开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/ecmascript"> function leo(n){ var navUi = document.getElementById("m"+n); if(navUi.style.display != "block"){ for(var i=0;i<=5;i++){ document.getElementById("m"+i).style.display = "none"; } navUi.style.display = "block"; }else{ navUi.style.display = "none"; } } </script> <style type="text/css"> <!-- body { margin:30px 150px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } * { margin: 0; padding: 0; list-style-type: none; } img {border:0} #nav { width:145px; background: #8e9eb1; border: 1px solid #8e9eb1; } #nav li { width: 145px; line-height: 24px;0000 border-top: 1px solid #a2b4c9; border-bottom: 1px solid #708195; position: relative; } .img { position: absolute; top:5px;left:10px; } .navLink { width: 115px; height: 24px; padding-left:30px; display: block; color: #ffffff; text-decoration: none; } .navLink:hover { background: url(navLink.gif) repeat-x; } .menu { width:145px; display: none; } .menu li { width:145px; height: 22px; border-bottom: 1px solid #708195; background: url(menu.gif); position: relative; } .menuLink {padding-left:50px;color:#6b7f97;text-decoration: none;} .menuLink:hover { text-decoration: underline; } .img2 { position: absolute; top:5px;left:30px; } --> </style> </head> <body> <ul id="nav"> <li><a onclick="leo(0)" href="#" class="navLink"><img src="nav.gif" class="img" />菜单首页</a></li> <ul id="m0" class="menu"> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />网站介绍</a></li> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />精品套餐</a></li> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />学习特色</a></li> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />免费试听</a></li> </ul> <li><a onclick="leo(1)" href="#" class="navLink"><img src="nav.gif" class="img" />关于介绍</a></li> <ul id="m1" class="menu"> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />团队介绍</a></li> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />学习成员</a></li> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />想说的话</a></li> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />寻觅高手</a></li> </ul> <li><a onclick="leo(2)" href="#" class="navLink"><img src="nav.gif" class="img" />培训套餐</a></li> <ul id="m2" class="menu"> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />CSS课程</a></li> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />PHP课程</a></li> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />AS3.0课程</a></li> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />课程说明</a></li> </ul> <li><a onclick="leo(3)" href="#" class="navLink"><img src="nav.gif" class="img" />特色教学</a></li> <ul id="m3" class="menu"> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />单独授课</a></li> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />按需订制</a></li> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />招聘要求</a></li> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />愉悦体验</a></li> </ul> <li><a onclick="leo(4)" href="#" class="navLink"><img src="nav.gif" class="img" />妙味资料库</a></li> <ul id="m4" class="menu"> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />CSS</a></li> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />AS3</a></li> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />JavaScript</a></li> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />PHP</a></li> </ul> <li><a onclick="leo(5)" href="#" class="navLink"><img src="nav.gif" class="img" />联系我们</a></li> <ul id="m5" class="menu"> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />QQ</a></li> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />MSN</a></li> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />手机</a></li> <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />地址</a></li> </ul> </ul> </body> </html>
运行效果：
