這次給項目做的串聯功能表使用了純CSS的方式，霍霍，能用CSS做的，就用CSS完成吧。
早已有前輩完成過這樣的執行個體了，我以為我能順利完成，但沒想到處處碰壁，故記錄一點心得如下，供大家參閱。
廢話不多說，咚咚咚，開始製作啦！
除了IE6這個堅強的孩子，其他瀏覽器攻克還是比較容易的。
該執行個體完成大概就兩個要點：
而IE6下折騰就比較複雜了，經過頭破血流的教訓之後，總結出關鍵四點：
1. 原理：IE6僅<a>標籤支援:hover偽類，但如果a標籤裡面再嵌入a標籤，裡面的a標籤將不會生效，所以必須在之間套加一層<table>；
<!–[if IE 6]><a href="#nogo"><table><tr><td><![endif]–>
內容部分可以含有<a>標籤
<!–[if IE 6]></td></tr></table></a><![endif]–>
2. 關鍵樣式名：這個用於:hover效果的a標籤的命名，如果使用與<li>一致的樣式名（在非IE6中是li:hover產生的效果），將不用再另寫樣式代碼，不僅節省了代碼開銷，而且可維性更好；（這個是省時省力的關鍵）
<li class="li">
<!–[if IE 6]><a class="li" href="#nogo"><table><tr><td>
<![endif]–>
內容部分可以含有<a>標籤
<!–[if IE 6]></td></tr></table></a><![endif]–>
</li>
3. visibility的使用：採用display的話將出現onmouseout時上一次顯示的optionGroup仍然不消失的情況
.c_subNav .li:hover ul { visibility:visible;}
4.table的設定： [含淚ing]table一定要記得width:100%;啊，一定要記得啊，一定要記得啊，一定要記得啊。
<!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=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <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">簡訊回執</a></li> <li class="li"><a href="#nogo" class="option">12580綜合資訊</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">GPRS</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">WLAN業務</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> </ul> <!--[if IE 6]></td></tr></table></a><![endif]--> </li> <li class="li"> <a href="#nogo" class="option">夢網查詢與退訂</a> </li> </ul> <!--[if IE 6]></td></tr></table></a><![endif]--> </li> <li class="li change"> <!--[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">GPRS套餐變更</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 score"> <!--[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> </ul> <!--[if IE 6]></td></tr></table></a><![endif]--> </li> <li class="li server"> <!--[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> </ul> <!--[if IE 6]></td></tr></table></a><![endif]--> </li> <li class="li edit"> <!--[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">PUK碼查詢</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 sms"> <a href="#nogo" class="option">簡訊息服務</a> </li> </ul> </div> </body> </html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
