699阅读
0回复

[其它]完美ＣＳＳ＋ＤＩＶ鼠标感应下拉代码（附件里有更多JS及css经典实例） [复制链接]

上一主题下一主题查看指定楼层

离线liruoxi1021

小学一年级

发帖: 21

C币: 8740

威望: 0

贡献值: 6

银元: 0

铜钱: 141

人人网人气币: -15

只看楼主倒序阅读使用道具楼主发表于: 2011-04-05

特效JS代码.rar (129 K) 下载次数:11

特效JS代码.rar (129 K) 下载次数:11 <style type="text/css">
*{margin:0;padding:0;}
.menu{font-size:12px;position:relative;z-index:100;}
.menu ul{list-style:none;}
.menu li {float:left;position:relative;}
.menu ul ul{visibility:hidden;position:absolute;left:3px;top:23px;}
.menu table {position:absolute;top:0;left:0;}
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}
.menu a{display:block;border:1px solid#aaa;background:#fff;padding:2px10px;margin:3px;color:#000;text-decoration:none;}
.menu a:hover{background:#EEE9E9;color:#000;border:1pxsolid #EEE9E9;}
.menu ul ul{}
.menu ul ul li{clear:both;text-align:left;font-size:12px;}
.menu ul ul lia{display:block;width:100px;height:14px;margin:0;border:0;border-bottom:1pxsolid #EEE9E9;}
.menu ul ul li a:hover{border:0;background:#EEE9E9;border-bottom:1pxsolid #fff;}
#centerwrapper {width: 986px;text-align:left;margin: 0 auto;border-left: 0px #555454 solid;border-right: 0px #555454solid;}
#logomast {width: 986px;height:91px;position: relative; margin: 0 auto}
#logo {position: absolute;top: 5px;left:10px;font-size: 12px;}
#logotext {position: absolute;top:62px;left: 10px;font-size: 22px;}
#donate {position: absolute;top:25px;right: 10px;}
#dateline {position: absolute;top:5px;right: 10px;font-size: 12px;}
#linklx {position: absolute;top:70px;right: 10px;font-size: 12px;}
#linktext1 {width: 986px;text-align:left;margin-left: auto;;font-size: 12px;}
#linktext1 a:link {color: #191970;text-decoration: none;}
#linktext1 a:visited {color: #708090;text-decoration: none;}
#linktext2 {width: 986px;text-align:center;margin-left: auto;font-size: 12px;}
#linktext2 a:link {color: #191970;text-decoration: none;}
#linktext2 a:visited {color: #708090;text-decoration: none;}
</style>
<div class="photo">
<div id="div1">
<div id="centerwrapper">
<div class="menu">
<ul>
<li><ahref="http://hexun.com/zhaoluyang19861016/"target=_blank>首页
</a>


</li>
<li><a href="">本博栏目
</a>

<ul>
<li><ahref="http://oucou.blog.hexun.com"target=_blank>我的博客</a></li>
<li><ahref="http://rss.hexun.com/oucou/default.aspx"target=_blank>我的博览</a></li>
<li><ahref="http://oucou.photo.hexun.com"target=_blank>优酷相册</a></li>
<li><a href="http://oucou.music.hexun.com"target=_blank>优酷音乐</a></li>
<li><ahref="http://oucou.v.hexun.com"target=_blank>优酷视频</a></li>
<li><ahref="http://bookmark.hexun.com/oucou/default.aspx"target=_blank>我的网摘</a></li>
<li><ahref="http://hexun.com/oucou/circle.html"target=_blank> 朋友圈 </a></li>
<li><ahref="http://hexun.com/oucou/messageboard.html"target=_blank> 留言板 </a></li>
</ul>

</li>
<li><a href="">系统问题
</a>

<ul>
<li><ahref="">Windows 98</a></li>
<li><ahref="">Windows XP</a></li>
<li><a href="">Linux 系统</a></li>
<li><a href="">Vista 系统</a></li>
<li><a href="">系统工具</a></li>
<li><a href="">媒体工具</a></li>
<li><a href="">光盘工具</a></li>
<li><a href="">其他工具</a></li>
</ul>

</li>
<li><a href="">图形图象
</a>

<ul>
<li><ahref="">PhotoShop教程</a></li>
<li><a href="">Flash 教程</a></li>
<li><ahref="">FireWork 教程</a></li>
<li><ahref="">CSS/HTML 教程</a></li>
<li><ahref="">Dreamweaver教程</a></li>
<li><ahref="">FrontPage 教程</a></li>
<li><a href="">DOM/JS教程</a></li>
<li><a href="">网站心得及其它</a></li>
</ul>

</li>
<li><a href="">办公应用
</a>

<ul>
<li><a href="">Word教程</a></li>
<li><a href="">Excel教程</a></li>
<li><a href="">Powerpoint教程</a></li>
<li><ahref="">Outlook教程</a></li>
<li><ahref="">WPS/PDF教程</a></li>
<li><a href="">输入法教程</a></li>
<li><a href="">排版软件</a></li>
<li><a href="">其他办公软件</a></li>
</ul>

</li>
<li><a href="">编程开发
</a>

<ul>
<li><a href="">Asp教程</a></li>
<li><a href="">Jsp教程</a></li>
<li><a href="">java教程</a></li>
<li><a href="">VB教程</a></li>
<li><a href="">C/c#教程</a></li>
<li><a href="">VC++教程</a></li>
<li><ahref="">SQL/ACCESS教程</a></li>
<li><a href="">数据库其他</a></li>
</ul>

</li>
<li><a href="">特效代码
</a>

<ul>
<li><a href="">综合特效</a></li>
<li><a href="">文本特效</a></li>
<li><a href="">页面特效</a></li>
<li><a href="">图形特效</a></li>
<li><a href="">菜单特效</a></li>
<li><a href="">鼠标特效</a></li>
<li><a href="">状态栏类</a></li>
<li><a href="">日期时间类</a></li>
</ul>

</li>
<li><a href=""> 速查手册
</a>

<ul>
<li><ahref="http://hexun.com/oucou" target=_blank>HTML标记速查</a></li>
       <li><ahref="http://hexun.com/oucou" target=_blank>CSS样式表速查</a></li>
       <li><ahref="http://hexun.com/oucou" target=_blank>JS脚本语言速查</a></li>
       <li><ahref="http://hexun.com/oucou" target=_blank>VB脚本语言速查</a></li>
       <li><ahref="http://hexun.com/oucou" target=_blank>MS ADO程序开发</a></li>
       <li><ahref="http://hexun.com/oucou" target=_blank>ASP编程语言速查</a></li>
       <li><ahref="http://hexun.com/oucou" target=_blank>HPH编程语言速查</a></li>
       <li><ahref="http://hexun.com/oucou" target=_blank>T-SQL语言速查</a></li>
</ul>

</li>
<li><a href="">实用查询
</a>

<ul>
       <li><ahref="item4b.html">IP地址查询</a></li>
       <li><ahref="item4c.html">列车时刻表查询</a></li>
       <li><ahref="item4d.html">电子成语词典</a></li>
       <li><ahref="item4e.html">邮编区号查询</a></li>
       <li><ahref="item4b.html">手机号归属地查询</a></li>
       <li><ahref="item4c.html">身份证号码查验</a></li>
       <li><ahref="item4d.html">天气预报查询</a></li>
       <li><ahref="item4e.html">Google在线翻译</a></li>
</ul>

</li>
<li><a href="">站长工具
</a>

<ul>
       <li><ahref="item4b.html">网站收录查询</a></li>
       <li><ahref="item4c.html">Alexa排名查询</a></li>
       <li><ahref="item4d.html">HTML/JS互转工具</a></li>
       <li><ahref="item4e.html">JS/VBS加密/解密</a></li>
       <li><ahref="item4b.html">Escape加密/解密</a></li>
       <li><ahref="item4c.html">Unicode编码转换</a></li>
       <li><ahref="item4d.html">CSS在线编辑器</a></li>
       <li><ahref="item4e.html">查看网站源代码</a></li>
</ul>

</li>
<li><a href="">网站导航
</a>

<ul>
       <li><ahref="http://www.163.com"target=_blank>网易网站</a></li>
       <li><ahref="http://www.g.cn"target=_blank>谷歌网站</a></li>
       <li><ahref="http://www.baidu.com"target=_blank>百度网站</a></li>
       <li><ahref="http://www.sougou.com"target=_blank>搜狗网站</a></li>
       <li><ahref="http://oucou.blog.hexun.com"target=_blank>百维新科</a></li>
       <li><ahref="http://group.hexun.com/oucou/newindex.aspx"target=_blank>电脑知识</a></li>
       <li><ahref="http://blog.zol.com.cn/oucou8"target=_blank>电脑之家</a></li>
       <li><ahref="http://oucou.blog.hexun.com"target=_blank>博客设计</a></li>
</ul>

</li>
<li><a href="">友情连接
</a>

<ul>
       <li><ahref="item4b.html">文字连接</a></li>
       <li><ahref="item4c.html">图片连接</a></li>
       <li><ahref="item4d.html">申请连接</a></li>
       <li><ahref="item4e.html">更多连接</a></li>
       <li><ahref="item4b.html">博主其人</a></li>
       <li><ahref="item4c.html">设为首页</a></li>
       <li><ahref="item4d.html">加入收藏</a></li>
       <li><ahref="item4e.html">关闭此页</a></li>
</ul>

</li>
<li><a href="">免费资源
</a>

<ul>
<li><ahref="item4a.html">免费网络赚钱</a></li>
       <li><ahref="item4b.html">免费建站资源</a></li>
       <li><ahref="item4c.html">免费主页空间</a></li>
       <li><ahref="item4d.html">免费网络相册</a></li>
       <li><ahref="item4e.html">免费网络硬盘</a></li>
       <li><ahref="item3d.html">免费翻译网站</a></li>
       <li><ahref="item3e.html">免费电子邮箱</a></li>
       <li><ahref="item3f.html">免费域名资源</a></li>
</ul>

</li>
</ul>
</div>
</div>
</div>

[ 此帖被liruoxi1021在2011-04-05 20:30重新编辑 ]