一个相当简单的网站横向导航菜单特效

王朝html/css/js·作者佚名  2008-05-31
窄屏简体版  字體: |||超大  

<!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>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航