首 页
创意产业
设计资讯
UI设计
平面设计
设计教程
网站建设
站长学院
素材下载
软件下载
当前位置：
首页
>>
网站建设
>> 正文
一个简单的二级导航效果
文章来自:设计学院 | 发表时间:2007-12-7 16:18:59
一个简单的二级导航效果
Source Code to Run
<!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>一个简单的二级导航效果</title> <style type="text/css"> <!-- ul { padding: 0; margin: 0; list-style:none; } li { float:left; width:160px; } li ul { display: none; top: 20px; } li:hover ul,li.over ul { display: block; } --> </style> <script language="javascript"> startList = function() { navli = document.getElementById("nav").document.getElementsByTagName("li"); if(navli) { for(i=0 ; i<navli.length ; i++) { navli[i].onmouseover = function() { this.className+=" over"; } navli[i].onmouseout = function() { this.className = this.className.replace("over",""); } } } } window.onload = startList; </script> </head> <body> <ul id="nav"> <li><a href="">文章</a> <ul> <li><a href="">css教程</a></li> <li><a href="">css教程</a></li> <li><a href="">css教程</a></li> <li><a href="">css教程</a></li> </ul> </li> <li><a href="">参考</a> <ul> <li><a href="">XHTML</a></li> <li><a href="">XHTML</a></li> <li><a href="">XHTML</a></li> </ul> </li> <li><a href="">Blog</a> <ul> <li><a href="">全部</a></li> <li><a href="">全部</a></li> <li><a href="">全部</a></li> <li><a href="">全部</a></li> </ul> </li> </ul> </body> </html>
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]
相关文章
margin优化的一种思路
DIV+CSS布局实例:各种2栏3栏布局实例(附下载)
IE5.0、IE5.5、IE6.0、IE7.0、FF1.5、FF2.0兼容CSS Hack代码范例
解决IE下CSS背景图片闪烁的Bug
用overflow代替left截取指定长度字符串
怎样管理好样式
CSS超级技巧大放送合集
CSS中 display 与 visibility 的区别
CSS设计符合Web标准的网页表单的几个技巧
使用:after清除浮动
常用CSS缩写语法总结
关于
的css式样制定
禁止背景图在网页平铺
CSS样式表技巧总结
CSS样式表：详细介绍IE7新支持的选择器[4]
如何用CSS让文字居于div的底部
当前位置：
