<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下拉菜单2-1,JS</title> <style> * { padding: 0; margin: 0; } #nav { background-color: #eee; width: 600px; height: 40px; margin: 0 auto; } ul { list-style: none; } ul li { float: left; line-height: 40px; text-align: center; } a { text-decoration: none; color: #000; display: block; padding: 0 20px; } a:hover { color: #fff; background-color: #666; } ul li ul li { float: none; background-color: #eee; margin-top: 2px; } ul li ul { position: absolute; display: none; } </style> <script type="javascript"> function showsubmenu(){ var submenu=li.getElementsByTagName("ul")[0]; submenu.style.display="block"; } function hidesubmenu(){ var submenu=li.getElementsByTagName("ul")[0]; submenu.style.display="none"; } </script> </head> <body> <div id="nav"> <ul> <li><a href="#">首页</a></li> <li onmouseover="showsubmenu()" onmouseout="hidesubmenu()"><a href="#">课程大厅</a> <ul> <li><a href="">javascript</a></li> <li><a href="">jQuery</a></li> </ul> </li> <li><a href="#">学习中心</a> <ul> <li><a href="">视频学习</a></li> <li><a href="">案例学习</a></li> <li><a href="">交流平台</a></li> </ul> </li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul> </div> </body> </html>
相关分类