网页特效
建站首页
|
广告代码
|
源码下载
|
站长工具
|
字体下载
|
网页模板
|
收藏本站
|
设为首页
网站首页
菜单导航
日期时间
背景图像
图层样式
鼠标键盘
页面窗口
色彩表格
链接文字
表单按钮
计数转换
游戏娱乐
综合实例
特效
热门搜索:
特效代码
js脚本
导航菜单
热点推荐:
英文字体
人民币汇率
dw插件
站长常用软件
alexa排名查询
您的位置:
网页特效
->
菜单导航
-> 纯css制作的三级导航菜单
纯css制作的三级导航菜单
作者:admin 发布时间:2010-2-7 19:59:45 发布人: admin
<!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"/> <meta name="keywords" content="站长,网页特效,js特效,广告代码"/> <meta name="description" content="站长特效网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在站长特效网"/> <title>css设计三级导航菜单</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} .c_subNav { width:150px; } .c_subNav table { width:100%; border-collapse:collapse;} .c_subNav a { text-decoration:none; color:#333;} .c_subNav a:hover { color:#f60;} .c_subNav ul ul { position:absolute; visibility:hidden; right:-150px; top:-1px;} .c_subNav li { border-bottom:1px solid #ccc; position:relative; _position:static; float:left; width:100%;} .c_subNav a.li { position:relative;} .c_subNav li .option { display:block; line-height:15px; padding:5px 5px 5px 25px; background:no-repeat 5px 4px; cursor:pointer; font:12px Verdana; zoom:1; background:url(/web/20150530185111im_/http://myjs.jz123.cn/js/caidan/img/ico.gif) no-repeat;} .c_subNav li .option:hover { color:#f60; background-color:#ffa;} .c_subNav li .option span { display:block; padding-right:15px; background:url(/web/20150530185111im_/http://myjs.jz123.cn/js/caidan/img/ico.gif) no-repeat right 0;} .c_subNav li .option:hover span { background-position:right -15px;} .c_subNav .li:hover { z-index:2; background:transparent;} .c_subNav .li:hover ul { visibility:visible;} .c_subNav .li:hover ul ul { visibility:hidden;} .c_subNav .li:hover ul { border:1px solid #ccc; border-width:1px 2px 2px 1px; width:150px; background:#fff; padding:1px;} .c_subNav .li:hover li { border-bottom:none;} .c_subNav .li:hover li .option { padding:2px 5px; background:transparent;} .c_subNav .li:hover li .option:hover { background:#0096ff; color:#fff;} .c_subNav .li:hover li .option:hover span { background-position:right -30px;} .c_subNav .li:hover .li:hover ul { visibility:visible; left:145px; top:-2px;} /*---图标差异---*/ .c_subNav .charges .option { background-position:4px -45px;} .c_subNav .biz .option { background-position:4px -70px;} .c_subNav .change .option { background-position:4px -95px;} .c_subNav .score .option { background-position:4px -120px;} .c_subNav .server .option { background-position:4px -145px;} .c_subNav .edit .option { background-position:4px -170px;} .c_subNav .sms .option { background-position:4px -195px;} </style> </head> <body> <div class="c_subNav"> <ul> <li class="li charges"> <a href="http://web.archive.org/web/20150530185111/http://jz123.cn/" class="option"><span>网站首页</span></a> <ul> <li class="li"> <a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option"><span>站长特效</span></a> <ul> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">实时话费查询</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">话费余额查询</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">月账单查询</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">月详单查询</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">缴费历史查询</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">资费优选推荐</a></li> </ul> </li> <li class="li"> <a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option"><span>网页特效</span></a> <ul> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">定制短信账单</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">话费余额短信提醒</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">定制Email账单</a></li> </ul> </li> <li class="li"> <a href="http://web.archive.org/web/20150530185111/http://zzjs.net/catalog.asp?cate=11" class="option"><span>广告代码</span></a> <ul> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">网上缴费</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">充值卡缴费</a></li> </ul> </li> </ul> </li> <li class="li biz"> <a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option"><span>业务办理</span></a> <ul> <li class="li"> <a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option"><span>日常业务办理</span></a> <ul> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">来电显示</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">呼叫等待</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">呼叫转移</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">三方通话</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">来电提醒</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">呼叫保持</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">呼叫转移设置</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">主叫隐藏</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">彩铃</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">国内漫游</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">短信回执</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">12580综合信息</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">关爱一线通</a></li> </ul> </li> <li class="li"> <a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option"><span>数据业务</span></a> <ul> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">手机上网</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://zzjs.net/catalog.asp?cate=1" class="option">GPRS</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://zzjs.net/catalog.asp?cate=3" class="option">飞信</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://zzjs.net/catalog.asp?cate=4" class="option">手机报</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">无线音乐俱乐部</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">手机邮箱</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">号簿管家</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">WLAN业务</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">彩乐短信</a></li> </ul> </li> <li class="li"> <a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option"><span>手机报停/报开</span></a> <ul> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">手机报停</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">手机复机</a></li> </ul> </li> <li class="li"> <a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">梦网查询与退订</a> </li> </ul> </li> <li class="li change"> <a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option"><span>套餐办理与变更</span></a> <ul> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">GPRS套餐变更</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">产品变更</a></li> </ul> </li> <li class="li score"> <a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option"><span>积分计划</span></a> <ul> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">积分查询</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">积分兑换</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">积分明细查询</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">积分兑换话费</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">积分兑换历史查询</a></li> </ul> </li> <li class="li server"> <a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option"><span>在线客服</span></a> <ul> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">号码归属地查询</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">营业厅查询</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">手机仿真</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">在线咨询</a></li> </ul> </li> <li class="li edit"> <a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option"><span>个人信息管理</span></a> <ul> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">个人资料修改</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">服务密码变更</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">服务密码重置</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">PUK码查询</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">套餐使用状态查询</a></li> <li class="li"><a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">业务开通状态查询</a></li> </ul> </li> <li class="li sms"> <a href="http://web.archive.org/web/20150530185111/http://myjs.jz123.cn/" class="option">短信息服务</a> </li> </ul> </div> </body> </html>
纯css制作的三级导航菜单
将本文收藏到QQ书签与更多好友分享
上一篇:文章:
阿里妈妈右下角弹窗效果
下一篇:文章:
CSS制作透明效果下拉菜单
本类浏览排行 »
搜索页面中的内容
又一款综合搜索引擎代码
标题栏显示当前时间
倒影效果的电子表,显示当前时间
自动记录当前页面最新的更新日期
JS让网页每隔2秒弹出一次对话框
一款超酷的CSS列表排行榜
鼠标悬停放大的纯CSS分页效果
本站推荐文章 »
垂直三栏自适应等高布局
仿QQ消息管理器的文本内容样式
支付宝的控制台动画效果菜单
文字、图片拖曳移动
可拉伸移动的DIV层效果
很酷的图片伸缩放大功能
较好的视觉效果的网页选项卡
CSS实例:通过定义渐变边框给图片加阴影