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

作者：袖梨 2022-07-02

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

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>

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