老子是80后的强人,却保持着70后的优秀思想,拥有90后的聪明头脑,贱踏在00后艰苦奋斗的大马路上……
<!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>CSS下拉菜单</title> <style type="text/css"> <!-- /* Main Styles */ body{ margin: 5px 0; padding: 0; background-color: #000; color: #949494; text-align: center; font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 11px; } ul{ list-style-type: none; } a.gen{ color: #949494; text-decoration: none; font-weight: bold; } a.gen:hover{ color: #0066FF; } /* Head Styles */ #nav{ /*main nav ul*/ position: relative; width: 630px; height: 10px; margin: 0; padding: 0; top: 0px; left: 0px; } .subnav{ /*subnav positon*/ margin: 0; padding: 0; display: none; position: absolute; background-color: #FAFAFA; text-align: left; border: 1px solid #bbb; top: 15px; left: 0; width: 125px; } .subnav li{ margin: 0; padding: 0 5px; display: block; width: auto; height: 20px; float: none; line-height:20px; } .mainnav{ /*float main-nav*/ float: left; position: relative; margin: 0; display: block; padding-right: 20px; width: auto; height: 20px; text-align: left; } #nav li:hover ul, #nav li.over ul{ display: block; } a.first{ margin: 0; padding: 0; color: #06f; font-size: 12px; font-weight: bold; text-decoration: none; } a.first:hover{ color: #959595; border-bottom: 3px solid #959595; } a.sub{ color: #0099CC; display: block; text-decoration: none; padding-left: 3px; height: 20px; } a.sub:hover{ color: #FFf; background-color: #336699; } --> </style> <!-- Here's Main Nav's Script --> <script type="text/javascript"> startList = function() { if (document.all && document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; </script> </head> <body> <ul id="nav"> <li class="mainnav"><a href="./" class="first" title="Home">首 页</a> </li> <li class="mainnav"><a href="zxjj.asp" class="first" title="中心简介">中心简介</a> <ul class="subnav"> <li><a href="zxjj.asp" class="sub">办学理念</a></li> <li><a href="spbf.asp" class="sub">视频播放</a></li> <li><a href="fwlc.asp" class="sub">服务流程</a></li> <li><a href="cpyc.asp" class="sub">诚聘英才</a></li> </ul> </li> <li class="mainnav"><a href="jjyd.asp" class="first" title="家教园地">家教园地</a> <ul class="subnav"> <li><a href="jjyd.asp" class="sub">一对一辅导</a></li> <li><a href="xbjx.asp" class="sub">小班教学</a></li> <li><a href="jsfw.asp" class="sub">计时服务</a></li> </ul> </li> <li class="mainnav"><a href="cgal.asp" class="first" title="成功案例">成功案例</a> <ul class="subnav"> <li><a href="cgal2008.asp" class="sub">2008年</a></li> <li><a href="cgal2007.asp" class="sub">2007年</a></li> <li><a href="cgal2006.asp" class="sub">2006年</a></li> <li><a href="cgal2005.asp" class="sub">2005年</a></li> </ul> </li> <li class="mainnav"><a href="szjs.asp" class="first" title="师资介绍">师资介绍</a> <ul class="subnav"> <li><a href="szjs.asp" class="sub">一线教师</a></li> <li><a href="szjs02.asp" class="sub">专职教师</a></li> <li><a href="szjs03.asp" class="sub">大学生助教</a></li> </ul> </li> <li class="mainnav"><a href="jtjy.asp" class="first" title="家庭教育">家庭教育</a> <ul class="subnav"> <li><a href="jtjy.asp" class="sub">家庭教育</a></li> <li><a href="jtjy.asp" class="sub">心理咨询</a></li> </ul> </li> <li class="mainnav"><a href="pxyd.asp" class="first" title="培训园地">培训园地</a></li> <ul class="subnav"> <li><a href="pxyd.asp" class="sub">成人培训</a></li> <li><a href="pxyd01.asp" class="sub">研究生招生</a></li> <li><a href="pxyd02.asp" class="sub">劳动部职业资格认证</a></li> <li><a href="pxyd03.asp" class="sub">计算机等级考试</a></li> <li><a href="pxyd04.asp" class="sub">公共英语等级考试</a></li> </ul> <li class="mainnav"><a href="zjj.asp" class="first" title="教员报名">教员报名</a></li> <li class="mainnav"><a href="zxdy.asp" class="first" title="在线答疑">在线答疑</a></li> </ul> </body> </html>
提示:您可以先修改部分代码再运行
姓名
Email (不会被公布)
网站
Spam protection: Sum of 8 + 9 ?
本文分类于uncat.您可以订阅本文评论的RSS 2.0.您可以 发表评论, 或者引用本文 到您的站点
0 Responses to “CSS下拉菜单一个”