模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
菜单导航特效代码
>
收藏
分享
查看评论
菜单导航
演示
简约、兼容好的XHTML+css二级导航菜单_菜单导航特效
查看演示效果
特效Tag：
二级菜单
添加
简约、兼容好的XHTML+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> <meta http-equiv="Content-Type" mrc="text/html; charset=utf-8" /> <title>纯CSS+XHTML下拉菜单</title> <style type="text/css"> <!-- * { margin:0; padding:0; } body { font:12px Verdana, Geneva, sans-serif #333; line-height:1.5; } ul li { list-style:none; } .menu { width:660px; margin:20px auto; } .menu li { display:inline; float:left; margin:0 5px; background:#f2f2f2; border:1px #39c solid; text-align:center; font-size:14px; font-weight:700; line-height:30px; cursor:hand; } .tuckUp { display:inline; width:120px; height:30px; overflow:hidden; background:#f2f2f2; } .pullDown{ display:inline; height:auto; } .item a:link, .item a:visited { display:inline; float:left; width:110px; background:#ccc; text-align:center; color:#444; font-size:12px; font-weight:normal; text-decoration:none; line-height:25px; margin:0 5px 5px 5px; } .item a:hover { display:inline; float:left; background:#39c; width:100px; color:#FFF; text-decoration:none; text-align:center; font-size:12px; font-weight:700; font-weight:normal; line-height:25px; padding:0 0 0 10px; margin:0 5px 5px 5px; } // --> </style> </head> <body> <ul class="menu"> <li class="tuckUp" onmousemove="this.className='pullDown'" onmouseout="this.className='tuckUp'">精品特效 <div class="item"><a href="/">网页特效</a></a><br /> <a href="/">层和布局</a></a><br /> <a href="/">表单按钮</a><br /> </div> </li> <li class="tuckUp" onmouseover="this.className='pUllDown'" onmouseout="this.className='tuckUp'">菜单导航 <div class="item"><a href="/">菜单导航</a><br /> <a href="/">CSS菜单</a><br /> <a href="/">JQUERY菜单</a><br /> </div> </li> <li class="tuckUp" onmouseover="this.className='pullDown'" onmouseout="this.className='tuckUp'">源代码 <div class="item" ><a href="/">源码下载</a><br /> <a href="/">ASP分类</a><br /> <a href="/">PHP分类</a><br /> <a href="/">ASP.NET</a><br /> </div> </li> <li class="tuckUp" onmouseover="this.className='pUllDown'" onmouseout="this.className='tuckUp'">更新汇总 <div class="item"><a href="/">最新更新</a><br /> <a href="/">最新更新</a><br /> <a href="/">网站首页</a><br /></div> </li> <li class="tuckUp" onmouseover="this.className='pUllDown'" onmouseout="this.className='tuckUp'">脚本下载 <div class="item"><a href="/">脚本资源</a><br /> <a href="/">AJAX</a><br /> <a href="/">JQUERY</a><br /> <a href="/">EXTJS</a><br /> </div> </li> </ul> </body> </html>
所属频道：
菜单导航特效
/
更新时间：2012-11-15
[收藏]
[报错]
[返回列表]
相关
菜单导航特效
：
CSS+div+js组合强大实现超酷菜单
超酷仿GOOGLE首页导航菜单效果
仿网易的滑动门技术DIV+CSS实现
仿蓝色理想网站的导航菜单
鼠标触及带边框菜单
用JS实现的类似框架的链接导航模式
CSS立体层
右键弹出菜单
纯css的导航下拉菜单
隐藏菜单效果
css模拟title和alt的提示效果
下拉菜单链接页面打开方式选择
菜单导航特效Rss订阅
特效代码搜索
菜单导航特效推荐
CSS二级菜单，圆角兼容性好
看似透明的红灰风格网站下拉菜单
悬浮在网页顶部可关闭的工具条(浮动层)
隐藏菜单
仿蓝色理想网站的导航菜单
漂亮淡蓝色滑动门代码
二级菜单居中的横向CSS下拉菜单
带缺口导航的CSS菜单栏
分两个等级的下拉菜单
清新带圆角的CSS竖向菜单
猜你也喜欢看这些
自由移动的图片
JavaScript动态控制图片透明度的变化
JavaScript封装的平滑图片滚动，绝不用jQuery
JavaScript图片选择器
旗帜
真正的JavaScript图片淡入淡出特效
Js新闻幻灯图片轮番播放代码
让背景图片也具有链接热点的功能
图像过来
JS+CSS给图片加上鼠标滑过的方框
相关链接：
复制本页链接
|
搜索简约、兼容好的XHTML+css二级导航菜单
特效说明：
菜单导航模板
-
简约、兼容好的XHTML+css二级导航菜单
。
。。