一个相当简单的网站横向导航菜单特效 - 建站学院 - 源码网

源码网欢迎您!

一个相当简单的网站横向导航菜单特效(2009-06-15)

<!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=gb2312" />
<title>一个简单的CSS制作的网站横向导航菜单 knowsky.com</title>
<script>
window.onload=function(){
  var li=document.getElementById("nav").getElementsByTagName("li");
  for(var i=0;i<li.length;i++){
    li[i].onmouseout=function(){
      this.style.backgroundColor="";
      }
    li[i].onmouseover=function(){
      this.style.backgroundColor="green";
      }
    }
  }
</script>
</head>
<body style="background-color: #5396a4; background-repeat:repeat-x" >
<style>
ul,li{ margin:0px; padding:0px;list-style-type: none;}
li{background-color:gray}
#nav{}
#nav li{ float:left; margin-left:10px; height:30px; padding-top:8px; width:80px; text-align:center; overflow:hidden;}
#nav li a { margin-top:5px;}
#nav span{display:none;}
#nav a{font-size:13px;font-weight: bold;color: #FFFFFF;text-decoration: none; display:block;}
#nav a:hover{ color:#7c7c7c;top:1px; left:1px; position:relative;}
#nav a:hover span{ display:block; top:-2px; left:-2px; position:absolute; color:#FFFFFF;cursor:pointer; font-weight:bolder}
</style>
<div onmouseout="" onmouseover="" id="nav">
  <ul>
    <li><a href="#" >网站首页<span>网站首页</span></a></li>
    <li><a href="#">网站首页<span>网站首页</span></a></li>
    <li><a href="#" >网站首页<span>网站首页</span></a></li>
    <li><a href="#">网站首页<span>网站首页</span></a></li>
    <li><a href="#">网站首页<span>网站首页</span></a></li>
  </ul>
</div>
</body>
</html>

上一篇:准确获取指定元素CSS属性值

下一篇:Photoshop调出外景人物照片颓废暗黄色

关于本站  |  版权声明 | 合作联系 | 网站地图 | 帮助中心 |  | XHTML/CSS
Copyright © 2004-2010 downcodes.com 程序支持:木翼 冀ICP备05003145号
本站诚招服务器赞助商