收藏本站
Sitemap
Tag
Rss
网站首页
网页特效
网页教程
建站资源
全部
当前位置:
首页
网页特效
导航菜单
用CSS滤镜实现的超酷半透明效果下拉菜单
2010-02-20 18:12:27
来源:
5icool.org
网友评论
0
条
<!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" lang="gb2312" xml:lang="gb2312"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>超酷的半透明效果下拉菜单特效 www.5icool.org</title> <style> body{ background-color:#9BD5BF; font-size:12px; font-family:Arial, Helvetica, sans-serif; margin:0px; padding:0px; color:white; } ul,li{ margin:0px; padding:0px; } li{ display:inline; list-style:none; list-style-position:outside; text-align:center; font-weight:bold; float:left; } a:link{ color:#336601; text-decoration:none; float:left; width:100px; padding:3px 5px 0px 5px; } a:visited{ color:#336601; text-decoration:none; float:left; padding:3px 5px 0px 5px; width:100px; } a:hover{ color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; background-color:#539D26; } a:active{ color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; background-color:#539D26; } #nav{ width:600px; height:30px; border-bottom:0px; padding:0px 5px; position:absolute; z-index:1; left: 198px; top: 25px; } .list{ line-height:20px; text-align:left; padding:4px; font-weight:normal; } .menu1{ width:120px; height:auto; margin:6px 4px 0px 0px; border:1px solid #9CDD75; background-color:#F1FBEC; color:#336601; padding:6px 0px 0px 0px; cursor:hand; overflow-y:hidden; filter:Alpha(opacity=30); -moz-opacity:0.7; } .menu2{ width:120px; height:18px; margin:6px 4px 0px 0px; background-color:#F5F5F5; color:#999999; border:1px solid #EEE8DD; padding:6px 0px 0px 0px; overflow-y:hidden; cursor:hand; } </style> </head> <body> <div id="nav"> <ul> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">设置 <div class="list"> <a href="http://www.5icool.org/">我的Png</a><br /> <a href="#">我的Gif</a><br /> <a href="#">我的酷站</a><br /> <a href="#">我的日志</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> <a href="#">我的收藏</a><br /> <a href="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">风格 <div class="list"> <a href="http://www.5icool.org/">我的CHINAY</a><br /> <a href="#">我的首页</a><br /> <a href="#">我的日志</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">提醒 <div class="list"> <a href="http://www.5icool.org/">我的CHINAY</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">查询 <div class="list"> <a href="http://www.5icool.org/">我的CHINAY</a><br /> <a href="#">我的首页</a><br /> <a href="#">我的日志</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> <a href="#">我的日志</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> </div> </li> </ul> </div> </body> </html>
提示:可以对代码修改后再运行。
收藏
分享
报错
有关
CSS滤镜
透明效果
下拉菜单
CSS菜单
的代码资源
能兼容ie6/ie7/ie8以及firefox的css透明滤镜
用CSS实现的滑动门导航菜单代码
JS模拟弹力感应效果的图片相册代码
30款时尚个性的CSS网站导航条
jQuery加CSS3实现导航条半透明图形指示功能
实现动画弹力效果的jQuery类下拉菜单
用CSS和jQuery创建的动画效果导航菜单
用jQuery为导航菜单添加Tips提示功能
CSS与jQuery结合的网站导航下拉菜单
仿淘宝网首页导航条的纯CSS菜单特效
用CSS滤镜实现的超酷半透明效果下拉菜单
可兼容FireFox的中英文双语CSS导航菜单
兼容Firefox和IE的下拉导航菜单
多列联动的下拉导航菜单
[ 暂无下载 ]
用CSS实现的滑动门导航菜单代码
jQuery加CSS3实现导航条半透明图形指
jQuery + CSS打造仿FLASH的导航滑块
实现动画弹力效果的jQuery类下拉菜单
仿苹果机OS X系统的导航条放大镜特
模仿FLASH滑动效果的jQuery特效导航菜
当前共有
0
人发表了评论
查看全部评论>>
验证码:
赞助链接
分类导航
FLASH幻灯
JS幻灯
jQuery幻灯
焦点幻灯
图片特效
导航菜单
广告代码
在线客服
表单按钮
其它特效
JS相册
FLASH相册
热门下载
仿苹果机OS X系统的导航条放大镜特效
模仿FLASH滑动效果的jQuery特效导航菜单
用CSS实现的滑动门导航菜单代码
精美漂亮选项卡式的滑动导航菜单代码
实现动画弹力效果的jQuery类下拉菜单
CSS与jQuery结合的网站导航下拉菜单
全兼容高亮显示带滑动效果的二级折叠菜单
jQuery + CSS打造仿FLASH的导航滑块
赞助链接
网站首页
|
关于我们
|
联系方式
|
网站地图
|
返回顶部
CopyRight 2009-2010
酷站代码
版权所有