萬盛學電腦網 >> 網絡編程 >> 安卓開發 >> 什麼是html5純CSS的三級聯動級聯菜單？
什麼是html5純CSS的三級聯動級聯菜單？
下面我們給大家介紹一下html5純CSS的三級聯動級聯菜單吧!希望大家可以在這裡學習!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href="
<title>三級級聯菜單</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(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(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">
<!--[if IE 6]><a class="li" href="#nogo"><table><tr><td><![endif]-->
<a href="#nogo" class="option"><span>話費服務</span></a>
<ul>
<li class="li">
<!--[if IE 6]><a class="li" href="#nogo"><table><tr><td><![endif]-->
<a href="#nogo" class="option"><span>話費查詢</span></a>
<ul>
<li class="li"><a href="#nogo" class="option">實時話費查詢</a></li>
<li class="li"><a href="#nogo" class="option">話費余額查詢</a></li>
<li class="li"><a href="#nogo" class="option">月賬單查詢</a></li>
<li class="li"><a href="#nogo" class="option">月詳單查詢</a></li>
<li class="li"><a href="#nogo" class="option">繳費歷史查詢</a></li>
<li class="li"><a href="#nogo" class="option">資費優選推薦</a></li>
</ul>
<!--[if IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="li">
<!--[if IE 6]><a class="li" href="#nogo"><table><tr><td><![endif]-->
<a href="#nogo" class="option"><span>定制話費信息</span></a>
<ul>
<li class="li"><a href="#nogo" class="option">定制短信賬單</a></li>
<li class="li"><a href="#nogo" class="option">話費余額短信提醒</a></li>
<li class="li"><a href="#nogo" class="option">定制Email賬單</a></li>
</ul>
<!--[if IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="li">
<!--[if IE 6]><a class="li" href="#nogo"><table><tr><td><![endif]-->
<a href="#nogo" class="option"><span>網上交費</span></a>
<ul>
<li class="li"><a href="#nogo" class="option">網上繳費</a></li>
<li class="li"><a href="#nogo" class="option">充值卡繳費</a></li>
</ul>
<!--[if IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="li biz">
<!--[if IE 6]><a class="li" href="#nogo"><table><tr><td><![endif]-->
<a href="#nogo" class="option"><span>業務辦理</span></a>
<ul>
<li class="li">
<!--[if IE 6]><a class="li" href="#nogo"><table><tr><td><![endif]-->
<a href="#nogo" class="option"><span>日常業務辦理</span></a>
<ul>
<li class="li"><a href="#nogo" class="option">來電顯示</a></li>
<li class="li"><a href="#nogo" class="option">呼叫等待</a></li>
<li class="li"><a href="#nogo" class="option">呼叫轉移</a></li>
<li class="li"><a href="#nogo" class="option">三方通話</a></li>
<li class="li"><a href="#nogo" class="option">來電提醒</a></li>
<li class="li"><a href="#nogo" class="option">呼叫保持</a></li>
<li class="li"><a href="#nogo" class="option">呼叫轉移設置</a></li>
<li class="li"><a href="#nogo" class="option">主叫隱藏</a></li>
<li class="li"><a href="#nogo" class="option">彩鈴</a></li>
<li class="li"><a href="#nogo" class="option">國內漫游</a></li>
<li class="li"><a href="#nogo" class="option">
