<!DOCTYPE <a href="http://www.viphot.com/InfoList/Catalog_76_1.html" target="_blank" title="Html" >Html</a> PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html <a href="http://www.viphot.com/InfoList/Catalog_83_1.html" target="_blank" title="XML学习教程" >XML</a>ns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>一个简单的CSS制作的网站横向导航菜单webjx.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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

（出处：清风下载学院）

上一篇:用Div仿showModalDialog模式菜单的效果

下一篇:网页制作中CSS样式表的十个技巧

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

·WinRAR V3.41简体中文版下载

·Photoshop十余种漂亮照片边框简单制作技巧

·AIX 5L 学习大纲/简易教程（2）（未经许可，请勿COPY）

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

·Windows 2003 Server 简体中文企业版(免激活)ISO

·Adobe Photoshop CS 2 简体中文使用指南

·NDS《逆转裁判4 完美汉化简体中文版》模拟器

·极品飞车9简体中文版完整无删改

·侠盗猎车手5--圣安地列斯汉化补丁简体中文 3dm工

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员，我们尽快予以更正。
[打印本页] [关闭窗口] 转载请注明来源：http://www.viphot.com

	\| 帮助(？) \| 版权声明 \| 友情连接 \| 关于我们 \| 信息发布
Copyright 2007 www.viphot.com All Rights Reserved.	鄂ICP备05000083号Powered by:vipcn