javascript 编写下拉导航条

 

              

<style>

   #admTab {display:none; position:absolute; z-index:1; background-color:#ffffff;border-left:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;}
   #admTab ul {list-style:none; padding:0; margin:0; color:#bf4d00;}
   #admTab ul li {border-top:1px solid #ccc; line-height:15px; padding:5px;}
   #admTab ul li a {color:#0000a0; text-decoration:none; padding:0px;}
   #admTab .over {background-color:#ccc;}
</style>
<div id="admTab" οnmοuseοut="closeAdm()" align="center">
       <ul>

           <li οnmοuseοver="javascript:this.className='over'" οnmοuseοut="javascript:this.className=''" style="word-break:keep-all;"><a href="<%= managerStr[i][0]%>"><%= managerStr[i][1]%></a></li>

       </ul>
</div>
<script>
   function showAdm(val){
  val.style.background = "#ccc";
  var top = val.offsetTop;
  var left = val.offsetLeft;
  var height = val.offsetHeight;
  var width = val.offsetWidth;
  var parent = val.offsetParent;
  while( parent != null ){
      top += parent.offsetTop;
      left += parent.offsetLeft;
      parent = parent.offsetParent;
  }
  var admDiv = document.getElementById("admTab");
  admDiv.style.top = top+height;
  admDiv.style.right = document.body.clientWidth-(left+width);
  admDiv.style.display = 'block';
 }

   function closeAdm(){
  //adm 位置参数
  var adm = document.getElementById("admTab");
  var top = adm.offsetTop;
  var left = adm.offsetLeft;
  var height = adm.offsetHeight;
  var width = adm.offsetWidth;
  var parent = adm.offsetParent;
  while( parent != null ){
      top += parent.offsetTop;
      left += parent.offsetLeft;
      parent = parent.offsetParent;
  }
  //鼠标箭头位置
  var x = event.x + + document.body.scrollLeft - document.body.clientLeft;
  var y = event.y + document.body.scrollTop - document.body.clientTop;
  var admTab =  document.getElementById("admTab");//获取弹出DIV
  if ((x >= (left + width) || left > x || y >= (top + height) || top > y) && admTab.style.display!='none') {
   admTab.style.display="none";
   admTab.style.background="#ffffff";
  }
 }
</script>

 

/* 纯手写 欢迎提建议 不喜勿喷*/