模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
菜单导航特效代码
>
收藏
分享
查看评论
菜单导航
演示
带阴影的CSS菜单_菜单导航特效
查看演示效果
特效Tag：
CSS菜单
下拉菜单
添加
一款漂亮的CSS阴影菜单，可以有二级，不过用到了几个图片，查看演示的时候可以自行下载，红白相间，很清新的网站导航菜单条。
<!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> <title>CSS菜单</title> <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312"> <style> .menucontainer{background: #fff url(http://p1.mb5u.com/texiao/bgOFF.gif) no-repeat bottom left;} .menu {float:left;font-family: arial,verdana,sans-serif;width:100%;position:relative;font-size:11px;font-weight:bold; background:url(http://p1.mb5u.com/texiao/bgOFF.gif) repeat-x bottom left;border-top:4px solid #B30000;} .menu ul {padding:0;margin:0;list-style-type:none;float:left;position:relative;} .menu ul li {float:left;position:relative;display:inline;background:url(http://p1.mb5u.com/texiao/bgDIVIDER.gif) no-repeat bottom right;} .menu ul li a, .menu ul li a:visited {float:left;display:block;text-decoration:none;color:#000;width:auto;color:#666;padding:0px 16px 0px 16px;line-height:40px;height:40px;} * html .menu ul li a, .menu ul li a:visited {width:auto;w\idth:auto;} .menu ul li ul {display:none;} .menu ul li ul li{background:none;} table {margin:-1px;border-collapse:collapse;font-size:11px;} .menu ul li:hover a {color:#B30000;background: transparent url(http://p1.mb5u.com/texiao/bgON.gif) bottom left repeat-x;} .menu ul li:hover ul {display:block;position:absolute;top:36px;margin-top:1px;left:0;width:100%;border-top:1px solid #fff;} .menu ul li:hover ul li a {display:block;background:#e3e3e3;color:#333;height:auto;line-height:16px;padding:2px 16px 2px 16px;width:120px;border-top:1px solid #fff;} .menu ul li:hover ul li a:hover {color:#fff;background: #B30000 url(http://p1.mb5u.com/texiao/sub-arrow.gif) no-repeat;background-position: 4px 8px;} </style> </head> <body> <div class="menucontainer"> <div class="menu"> <ul> <li><a href="/" target="_blank">Home</a></li> <li><a href="#" target="_self">About us</a></li> <li><a class="drop" href="#" target="_self">Services<!--[if IE 7]><!--> </a> <!--<![endif]--> <table><tr><td> <ul><li><a href="#" target="_self">Design</a></li><li><a href="#" target="_self">Strategy</a></li><li><a href="#" target="_self">Analysis</a></li></ul></td></tr></table> <!--[if lte IE 6]> </a> <![endif]--> </li> <li><a href="/" target="_self">Support</a></li> <li><a href="/" target="_self">Forums</a></li> <li><a href="/" target="_self">Contact Us</a></li> </ul> </div> </div> <!-- END Menu --> </body> </html>
所属频道：
菜单导航特效
/
更新时间：2011-02-23
[收藏]
[报错]
[返回列表]
相关
菜单导航特效
：
CSS+div+js组合强大实现超酷菜单
超酷仿GOOGLE首页导航菜单效果
仿网易的滑动门技术DIV+CSS实现
仿蓝色理想网站的导航菜单
鼠标触及带边框菜单
用JS实现的类似框架的链接导航模式
CSS立体层
右键弹出菜单
纯css的导航下拉菜单
隐藏菜单效果
css模拟title和alt的提示效果
下拉菜单链接页面打开方式选择
菜单导航特效Rss订阅
特效代码搜索
菜单导航特效推荐
JS+CSS简易树状菜单Tree
垂直带指向的CSS导航条
JS+CSS但分类动态选择及移动功能
兼容IE/火狐的蓝色CSS多级导航栏
很不错的阴影菜单，仿XP经典风格
CSS+js实现的后台管理菜单
TAB标签选项卡(CSS+JS)
CSS竖直菜单，好棒！
动画效果慢慢放大的菜单
可重复使用的简洁Tab选项卡
猜你也喜欢看这些
JS图片滚动，从右向左滚动
改变网页背景图片
淘宝网缩略图预览生成大图的代码
Google纪念Logo小球下落特效
JS+CSS鼠标放图片上改变透明度
CSS+JS滚动图片功能代码
Flickr照片分享网的图片预览特效
两个基于jQuery的渐隐渐显图片轮换幻灯片
右下角随机显示的JS图片广告
JS打造立体旋转的图片特效
相关链接：
复制本页链接
|
搜索带阴影的CSS菜单
特效说明：
菜单导航模板
-
带阴影的CSS菜单
。
。。