純CSS 級聯菜單實現代碼

2024-07-11 08:38:37

字體：大中小

來源：轉載

供稿：網友

參與測試的瀏覽器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2
操作系統：Windows
這次給項目做的級聯菜單使用了純CSS的方式，霍霍，能用CSS做的，就用CSS完成吧。
早已有前輩完成過這樣的實例了，我以為我能順利完成，但沒想到處處碰壁，故記錄一點心得如下，供大家參閱。
廢話不多說，咚咚咚，開始制作啦！
除了IE6這個堅強的孩子，其他瀏覽器攻克還是比較容易的。
運行代碼框

<br /><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br /><html xmlns=”http://www.w3.org/1999/xhtml”><br /><head><br /><meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /><br /><meta name=”author” content=”Chomo” /><br /><link rel=”start” href=”http://www.14px.com” title=”Home” /><br /><title>三級級聯菜單</title><br /><style type=”text/css”><br />* { margin:0; padding:0; list-style:none;}<br />.c_subNav { width:150px; }<br />.c_subNav a { text-decoration:none; color:#333;}<br />.c_subNav a:hover { color:#f60;}<br />.c_subNav ul ul { position:absolute; display:none; right:-150px; top:-1px;}<br />.c_subNav li { border-bottom:1px solid #ccc; position:relative; _position:static; float:left; width:100%;}<br />.c_subNav a.li { position:relative;}<br />.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(http://huoche.7234.cn/images/jb51/obldzyqjajr.gif) no-repeat;}<br />.c_subNav li .option:hover { color:#f60; background-color:#ffa;}<br />.c_subNav li .option span { display:block; padding-right:15px; background:url(http://huoche.7234.cn/images/jb51/obldzyqjajr.gif) no-repeat right 0;}<br />.c_subNav li .option:hover span { background-position:right -15px;}<br />.c_subNav .li:hover { z-index:2; background:transparent;}<br />.c_subNav .li:hover ul { display:block;}<br />.c_subNav .li:hover ul ul { display:none;}<br />.c_subNav .li:hover ul { border:1px solid #ccc; border-width:1px 2px 2px 1px; width:150px; background:#fff; padding:1px;}<br />.c_subNav .li:hover li { border-bottom:none;}<br />.c_subNav .li:hover li .option { padding:2px 5px; background:transparent;}<br />.c_subNav .li:hover li .option:hover { background:#0096ff; color:#fff;}<br />.c_subNav .li:hover li .option:hover span { background-position:right -30px;}<br />.c_subNav .li:hover .li:hover ul { display:block; left:145px; top:-2px;}<br />.c_subNav .charges .option { background-position:4px -45px;}<br />.c_subNav .biz .option { background-position:4px -70px;}<br />.c_subNav .change .option { background-position:4px -95px;}<br />.c_subNav .score .option { background-position:4px -120px;}<br />.c_subNav .server .option { background-position:4px -145px;} </SPAN> </div> </div> <div id="iwvjtn8m0" class=page1> <p align="center" class="pageLink"></p> </div> <div id="iwvjtn8m0" class="fenxiang">  <div style="text-align:left">上一篇：<a href='/wen/2024/07-11/1342927.html'>CSS樣式設計網頁字體與用戶體驗</a></div> <br> <div style="text-align:left">下一篇：<a href='/wen/2024/07-11/1342929.html'>CSS制作網頁的類以及ids的命名</a></div> <br> <script src=/d/js/acmsd/gao21.js></script>  </div> <div id="iwvjtn8m0" class="pinglun">  <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您沒什么話要說嗎？"); obj.saytext.focus(); return false; } return true; } </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title"> <tr> <td><strong>發表評論</strong></td> <td align="right"><a href="/e/pl/?classid=215&id=1342928">共有<span><script type="text/javascript" src="/e/public/ViewClick/?classid=215&id=1342928&down=2"></script></span>條評論</a></td> </tr> </table> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="2"> <tr> <td width="56%" align="left">用戶名: <input name="username" type="text" class="inputText" id="username" value="" size="16" /></td> <td width="44%" align="left">密碼: <input name="password" type="password" class="inputText" id="password" value="" size="16" /></td> </tr> <tr> <td align="left">驗證碼: <input name="key" type="text" class="inputText" size="10" /> <img src="/e/ShowKey/?v=pl" align="absmiddle" /> </td> <td align="left"><input name="nomember" type="checkbox" id="nomember" value="1" checked="checked" /> 匿名發表</td> </tr> </table> <textarea name="saytext" cols="70" rows="6" id="saytext">

學習交流