<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>制作二级菜单</title> <style type="text/css"> body { margin: 0; padding: 0; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 12px; line-height: 1.5; } #menu ul { margin: 0; padding: 0; list-style: none; border: 1px solid #ccc; width: 100px; } #menu ul li { background-color: #eee; height: 26px; line-height: 26px; border-bottom: 1px solid #ccc; } #menu ul li a { color: #000; text-decoration: none; } #menu ul li a:hover { color: #ff0000; } #menu ul li ul { display: none; position: absolute; left: 100px; top: 0px; } #menu ul li.current ul { display: block; } </style> <script type="text/javascript"> startList = function () { navRoot = document.getElementById("menu"); var allli = navRoot.getElementsByTagName("li"); for (i = 0; i < allli.length; i++) { node = allli[i]; node.onmouseover = function () { this.className += "current"; } node.onmouseout = function () { this.className = this.className.replace("current", ""); } } } window.onload = startList; </script> </head> <body> <div id="menu"> <ul> <li><a href="#">PS</a> <ul> <li class="current"><a href="#">二级菜单列表1</a></li> <li class="current"><a href="#">二级菜单列表2</a></li> </ul> </li> <li><a href="#">Jave</a> <ul> <li class="current"><a href="#">二级菜单列表5</a></li> <li class="current"><a href="#">二级菜单列表6</a></li> <li class="current"><a href="#">二级菜单列表7</a></li> <li class="current"><a href="#">二级菜单列表8</a></li> <li class="current"><a href="#">二级菜单列表8</a></li> </ul> </li> <li><a href="#">php</a> <ul> <li class="current"><a href="#">二级菜单列表9</a></li> <li class="current"><a href="#">二级菜单列表10</a></li> <li class="current"><a href="#">二级菜单列表11</a></li> <li class="current"><a href="#">二级菜单列表12</a></li> </ul> </li> <li><a href="#">.net</a> <ul> <li class="current"><a href="#">二级菜单列表13</a></li> <li class="current"><a href="#">二级菜单列表14</a></li> <li class="current"><a href="#">二级菜单列表15</a></li> <li class="current"><a href="#">二级菜单列表16</a></li> <li class="current"><a href="#">二级菜单列表15</a></li> <li class="current"><a href="#">二级菜单列表16</a></li> </ul> </li> </ul> </div> </body> </html>
转载请标明出处:向右方向的二级菜单
文章来源: 向右方向的二级菜单