Div CSS制作的仿中国移动会员中心竖向三级导航菜单

时间：2022-07-02 14:41:30 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

Div 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>Div CSS制作的仿中国移动会员中心 竖向三级导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
*{margin:0;padding:0;list-style:none;}
.c_subNav{}
.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-padding:5px 5px 5px 25px;background:no-repeat 5px 4px;cursor:pointer;font:12px Verdana;zoom:1;background:url() no-repeat;}
.c_subNav li .option:hover{color:#f60;background-color:#ffa;}
.c_subNav li .option span{display:block;padding-right:15px;background:url() 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-2px 2px 1px;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="#" class="option"><span>网站首页</span></a>
   <ul>
    <li class="li">
     
     <a href="#" class="option"><span>站长特效</span></a>
     <ul>
      <li class="li"><a href="#" class="option">实时话费查询</a></li>
      <li class="li"><a href="#" class="option">话费余额查询</a></li>
      <li class="li"><a href="#" class="option">月账单查询</a></li>
      <li class="li"><a href="#" class="option">月详单查询</a></li>
      <li class="li"><a href="#" class="option">缴费历史查询</a></li>
      <li class="li"><a href="#" class="option">资费优选推荐</a></li>
     </ul>
     
    </li>
    <li class="li">
     
     <a href="#" class="option"><span>网页特效</span></a>
     <ul>
      <li class="li"><a href="#" class="option">定制短信账单</a></li>
      <li class="li"><a href="#" class="option">话费余额短信提醒</a></li>
      <li class="li"><a href="#" class="option">定制Email账单</a></li>
     </ul>
     
    </li>
    <li class="li">
     
     <a href="#" class="option"><span>广告代码</span></a>
     <ul>
      <li class="li"><a href="#" class="option">网上缴费</a></li>
      <li class="li"><a href="#" class="option">充值卡缴费</a></li>
     </ul>
     
    </li>
   </ul>
   
  </li>
  <li class="li biz">
   
   <a href="#" class="option"><span>业务办理</span></a>
   <ul>
    <li class="li">
     
     <a href="#" class="option"><span>日常业务办理</span></a>
     <ul>
      <li class="li"><a href="#" class="option">来电显示</a></li>
      <li class="li"><a href="#" class="option">呼叫等待</a></li>
      <li class="li"><a href="#" class="option">呼叫转移</a></li>
      <li class="li"><a href="#" class="option">三方通话</a></li>
      <li class="li"><a href="#" class="option">来电提醒</a></li>
      <li class="li"><a href="#" class="option">呼叫保持</a></li>
      <li class="li"><a href="#" class="option">呼叫转移设置</a></li>
      <li class="li"><a href="#" class="option">主叫隐藏</a></li>
      <li class="li"><a href="#" class="option">彩铃</a></li>
      <li class="li"><a href="#" class="option">国内漫游</a></li>
      <li class="li"><a href="#" class="option">短信回执</a></li>
      <li class="li"><a href="#" class="option">12580综合信息</a></li>
      <li class="li"><a href="#" class="option">关爱一线通</a></li>
     </ul>
     
    </li>
    <li class="li">
     
     <a href="#" class="option"><span>数据业务</span></a>
     <ul>
      <li class="li"><a href="http://www.111com.net" class="option">手机主题</a></li>
      <li class="li"><a href="#" class="option">GPRS</a></li>
      <li class="li"><a href="#" class="option">飞信</a></li>
      <li class="li"><a href="#" class="option">手机报</a></li>
      <li class="li"><a href="#" class="option">无线音乐俱乐部</a></li>
      <li class="li"><a href="#" class="option">手机邮箱</a></li>
      <li class="li"><a href="#" class="option">号簿管家</a></li>
      <li class="li"><a href="#" class="option">WLAN业务</a></li>
      <li class="li"><a href="#" class="option">彩乐短信</a></li>
     </ul>
     
    </li>
    <li class="li">
     
     <a href="#" class="option"><span>手机报停/报开</span></a>
     <ul>
      <li class="li"><a href="#" class="option">手机报停</a></li>
      <li class="li"><a href="#" class="option">手机复机</a></li>
     </ul>
     
    </li>
    <li class="li">
     <a href="#" class="option">梦网查询与退订</a>
    </li>
   </ul>
   
  </li>
  <li class="li change">
   
   <a href="#" class="option"><span>套餐办理与变更</span></a>
   <ul>
    <li class="li"><a href="#" class="option">GPRS套餐变更</a></li>
    <li class="li"><a href="#" class="option">产品变更</a></li>
   </ul>
   
  </li>
  <li class="li score">
   
   <a href="#" class="option"><span>积分计划</span></a>
   <ul>
    <li class="li"><a href="#" class="option">积分查询</a></li>
    <li class="li"><a href="#" class="option">积分兑换</a></li>
    <li class="li"><a href="#" class="option">积分明细查询</a></li>
    <li class="li"><a href="#" class="option">积分兑换话费</a></li>
    <li class="li"><a href="#" class="option">积分兑换历史查询</a></li>
   </ul>
   
  </li>
  <li class="li server">
   
   <a href="#" class="option"><span>在线客服</span></a>
   <ul>
    <li class="li"><a href="#" class="option">号码归属地查询</a></li>
    <li class="li"><a href="#" class="option">营业厅查询</a></li>
    <li class="li"><a href="#" class="option">手机仿真</a></li>
    <li class="li"><a href="#" class="option">在线咨询</a></li>
   </ul>
   
  </li>
  <li class="li edit">
   
   <a href="#" class="option"><span>个人信息管理</span></a>
   <ul>
    <li class="li"><a href="#" class="option">个人资料修改</a></li>
    <li class="li"><a href="#" class="option">服务密码变更</a></li>
    <li class="li"><a href="#" class="option">服务密码重置</a></li>
    <li class="li"><a href="#" class="option">PUK码查询</a></li>
    <li class="li"><a href="#" class="option">套餐使用状态查询</a></li>
    <li class="li"><a href="#" class="option">业务开通状态查询</a></li>
   </ul>
   
  </li>
  <li class="li sms">
   <a href="#" class="option">短信息服务</a>
  </li>
 </ul>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

Div CSS制作的仿中国移动会员中心竖向三级导航菜单

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程

推荐专题

最新下载

热门教程

Div CSS制作的仿中国移动会员中心 竖向三级导航菜单

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程

Div CSS制作的仿中国移动会员中心竖向三级导航菜单