JS特效：经典的下拉菜单

  1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
  2 < html  xmlns ="http://www.w3.org/1999/xhtml" >
  3 < head >
  4 < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
  5 < title > Alone's blog--导航 </ title >
  6 < style >
  7
  8a:link,a:visited{}{color:#2f5795;text-decoration:none;}
  9a:hover,a:active{}{color:#000;}
 10*{}{ margin:0; padding:0;}
 11li{}{list-style:none;vertical-align:middle;}
 12ol li{}{list-style:inside decimal; padding-left:6px;}
 13img{}{ border:0;}
 14.FL{}{float:left;}
 15.FR{}{float: right;}
 16.Hide{}{border-top:1px solid transparent !important;margin-top:-1px !important;border-top:0;margin-top:0;clear:both;visibility:hidden;}
 17
 18body{}{font:12px/21px "宋体";color:#000;text-align:center;}
 19.Wp {}{text-align:left; margin:0 auto;width:880px;}
 20#Head{}{height:35px; background:#323334 url(img/navbg1.jpg) repeat-x; width:100%;background: url(http://www.p.cn/img/navbg2.jpg) repeat-x;}
 21
 22#Head .Wp{}{height:32px;}
 23 #Head h1{}{ float:left;}
 24 #nav{}{ float:right;border-left: 1px solid #818488;border-right: 1px solid #323334;}
 25  #nav li{}{ float:left;}
 26  #nav li a{}{width:78px; height:32px;border-right:1px solid #818488;border-left:1px solid #323334; display:block; font: bold 14px/32px "宋体";text-align:center;}
 27  #nav a:link,#nav a:visited{}{color:#fff;text-decoration:none}
 28  #nav a:hover,#nav a:active,#hover{}{color:#fff;font: bold 16px/32px "宋体"; background: url(http://www.p.cn/img/navbg2.jpg) repeat-x;}
 29  
 30   #downall{}{position:absolute;top:33px;margin:0;padding:0;}
 31   #product{}{position:absolute;top:33px;margin:0;padding:0;}
 32   #product1{}{position:absolute;top:33px;margin:0;padding:0;}
 33   #product2{}{position:absolute;top:33px;margin:0;padding:0;}
 34   #product3{}{position:absolute;top:33px;margin:0;padding:0;}
 35   #downall li,#product li,#product1 li,#product3 li,#product2 li{}{ float:none}
 36   #downall li a,#product li a,#product1 li a,#product3 li a,#product2 li a{}{ width:130px; height:24px;border-bottom:1px dotted #818488; display:block; font:12px/24px "微软雅黑", "宋体";color:#fff; }
 37    #downall a:link,#downall a:visited,#product a:link,#product a:visited,#product1 a:link,#product1 a:visited,#product2 a:link,#product2 a:visited,#product3 a:link,#product3 a:visited{}{text-decoration:none;background:#3f4249}
 38    #downall a:hover,#downall a:active,#product a:hover,#product a:active,#product1 a:hover,#product1 a:active,#product2 a:hover,#product2 a:active,#product3 a:hover,#product3 a:active{}{font: bold 12px/24px "微软雅黑","宋体"; background: url(http://www.p.cn/img/navbg2.jpg) repeat-x;}
 39 </ style >
 40 < script  language ="javascript" >
 41// JavaScript Document
 42function $(s) {
 43  return document.getElementById(s)?document.getElementById(s):s;
 44}
 45function findPosX(obj)
 46{
 47  var curleft = 0;
 48  if (obj.offsetParent)
 49  {
 50    while (obj.offsetParent)
 51    {
 52      curleft += obj.offsetLeft
 53      obj = obj.offsetParent;
 54    }
 55  }
 56  else if (obj.x)
 57    curleft += obj.x;
 58  return curleft;
 59}
 60function findPosY(obj)
 61{
 62  var curtop = 0;
 63  if (obj.offsetParent)
 64  {
 65    while (obj.offsetParent)
 66    {
 67      curtop += obj.offsetTop
 68      obj = obj.offsetParent;
 69    }
 70  }
 71  else if (obj.y)
 72    curtop += obj.y;
 73  return curtop;
 74}
 75var currPcnNav=null;
 76function pcnNav(o){
 77 var offLeft = findPosX(o);
 78 var offTop = findPosY(o);
 79 var arrNav=document.getElementById("subNav").getElementsByTagName("ul");
 80 if (currPcnNav!=null) {
 81    hidPcnNav(currPcnNav);
 82 }
 83 if (o.getAttribute("urn")!="null") {
 84  shwPcnNav($(o.getAttribute("urn")),offLeft);
 85  currPcnNav=$(o.getAttribute("urn"));
 86  document.body.onmouseup=function(){
 87   hidPcnNav(currPcnNav);
 88  }
 89 } else {
 90      currPcnNav?hidPcnNav(currPcnNav):"";
 91 }
 92}
 93function shwPcnNav(o,n){
 94 o.style.display="";
 95 o.style.left=n+"px";
 96}
 97function hidPcnNav(o){
 98 o.style.display="none";
 99 document.body.onmouseup=null;
100}
101function pcnNavInit(){
102 var arrNav=document.getElementById("nav").getElementsByTagName("a");
103 for (var i=0;i<arrNav.length;i++ ) {
104  arrNav[i].onmouseover=function(){
105  pcnNav(this);
106  }
107 }
108}
109window.onload=pcnNavInit;
110 </ script >
111 </ head >
112 </ head >
113 < body >
114 < div  id ="Head" >
115   < div  class ="Wp" >
116    < ul  id ="nav" >
117     < li  id ="hover" >< a  urn ="null"  href ="#" > Alone </ a ></ li >
118     < li >< a  urn ="downall"  href ="#" > Alone </ a ></ li >
119     < li >< a  urn ="product"  href ="#" > Alone </ a ></ li >
120     < li >< a  urn ="product1"  href ="#" > Alone </ a ></ li >          
121     < li >< a  urn ="product2"  href ="#" > Alone </ a ></ li >
122     < li >< a  urn ="product3"  href ="#" > Alone </ a ></ li >
123     < li >< a  urn ="null"  href ="#" > Alone </ a ></ li >
124    </ ul >
125   </ div >
126 </ div >
127   < div  id ="subNav" >
128    < ul  id ='downall'  style ="display:none;" >
129     < li >< a  href ="http://www.hnctsd.cn/blog/" > Alone's blog </ a ></ li >
130     < li >< a  href ="http://www.hnctsd.cn/blog/" > Alone's blog </ a ></ li >
131     < li >< a  href ="http://www.hnctsd.cn/blog/" > Alone's blog </ a ></ li >
132    </ ul >
133    < ul  id ='product'  style ="display:none;" >
134     < li >< a  href ="http://www.hnctsd.cn/blog/" > Alone's blog </ a ></ li >
135     < li >< a  href ="http://www.hnctsd.cn/blog/" > Alone's blog </ a ></ li >
136     < li >< a  href ="http://www.hnctsd.cn/blog/" > Alone's blog </ a ></ li >
137              < li >< a  href ="http://www.hnctsd.cn/blog/" > Alone's blog </ a ></ li >
138    </ ul >
139          < ul  id ='product1'  style ="display:none" >
140     < li >< a  href ="http://www.hnctsd.cn/blog/" > Alone's blog </ a ></ li >
141     < li >< a  href ="http://www.hnctsd.cn/blog/" > Alone's blog </ a ></ li >
142     < li >< a  href ="http://www.hnctsd.cn/blog/" > Alone's blog </ a ></ li >
143              < li >< a  href ="http://www.hnctsd.cn/blog/" > Alone's blog </ a ></ li >
144              < li >< a  href ="http://www.hnctsd.cn/blog/" > Alone's blog </ a ></ li >
145    </ ul >
146           < ul  id ='product2'  style ="display:none" >
147     < li >< a  href ="http://www.hnctsd.cn/blog/" > Alone's blog </ a ></ li >
148     < li >< a  href ="http://www.hnctsd.cn/blog/" > Alone's blog </ a ></ li >
149     < li >< a  href ="http://www.hnctsd.cn/blog/" > Alone's blog </ a ></ li >
150              < li >< a  href ="http://www.hnctsd.cn/blog/" > Alone's blog </ a ></ li >
151              < li >< a  href ="http://www.hnctsd.cn/blog/" > Alone's blog </ a ></ li >
152              < li >< a  href ="http://www.hnctsd.cn/blog/" > Alone's blog </ a ></ li >
153    </ ul >
154           < ul  id ='product3'  style ="display:none" >
155     < li >< a  href ="http://www.hnctsd.cn/blog/" > Alone's blog </ a ></ li >
156     < li >< a  href ="http://www.hnctsd.cn/blog/" > Alone's blog </ a ></ li >
157     < li >< a  href ="http://www.hnctsd.cn/blog/" > Alone's blog </ a ></ li >
158              < li >< a  href ="http://www.hnctsd.cn/blog/" > Alone's blog </ a ></ li >
159              < li >< a  href ="http://www.hnctsd.cn/blog/" > Alone's blog </ a ></ li >
160              < li >< a  href ="http://www.hnctsd.cn/blog/" > Alone's blog </ a ></ li >
161              < li >< a  href ="http://www.hnctsd.cn/blog/" > Alone's blog </ a ></ li >
162    </ ul >
163   </ div >
164      < div  style ="margin-top:50px" >< h4 > 转载请著名作者:Alone </ h4 ></ div >
165      </ body >
166 </ html >  
167

转载于:https://www.cnblogs.com/StarYe/archive/2009/08/11/1543596.html