支援IE6 IE7 Firefox 的純CSS的下拉選單_經驗交流

<meta http-equiv="Content-Type" c> <title>純CSS的下拉式選單支援IE6 IE7 Firefox </title> *{邊距：0;填滿：0;} .menu{字體大小：12px;位置：相對;z-index：100;} .menu ul{列表樣式：無;} .menu li {float:left;position:relative;} .menu ul ul {可見性：隱藏；位置：絕對；左：3px；上：23px；} .選單表{位置：絕對;頂部：0；左：0；} .menu ul li:懸停 ul, .menu ul a:hover ul{可見性:可見;} .menu a{顯示：塊；邊框：1px實體#aaa；背景：紅色；填滿：2px 10px；邊距：3px；顏色：#fff；文字裝飾：無；} .menu a:hover{背景:#f2cdb0;顏色:#f00;邊框:1px純紅色;} .菜單 ul ul{} .menu ul ul li {清除：兩者；文字對齊：左；字體大小：12px；} .menu ul ul li a{顯示：塊；寬度：100px；高度：13px；邊距：0；邊框：0；邊框底部：1px純紅色；} .menu ul ul li a:hover{邊框:0;背景:#f2cdb0;邊框底部:1px 實心#fff;} 風格> 頭> <div> <ul> <li> <a href="">XHTML/CSS <!--[如果是 IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="">標準</a></li> <li><a href="">教程</a></li> <li><a href="">技術文章</a></li> <li><a href="">常見問題</a></li> <li><a href="">佈局教程專題</a></li> <li><a href="">CSS選單</a></li> <li><a href="">瀏覽器相容</a></li> <li><a href="">滾動條相關</a></li> <li><a href="">圓角投影專題</a></li> <li><a href="">CSS 特效專題專題</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <a href="">AJAX <!--[如果是 IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="">AJAX 教程</a></li> <li><a href="">AJAX技術</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <a href="">Javascript <!--[如果是 IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="">JSON</a></li> <li><a href="">技術文章</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="">DOM</a></li> <li><a href="">XML</a></li> <li> <a href="">正規表示式 <!--[如果是 IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="">正規表示式簡介</a></li> <li><a href="">正規表示式之道</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="">網站優化</a></li> <li><a href="">電腦網路</a></li> <li> <a href="">建站技術 <!--[如果是 IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="">PHP</a></li> <li><a href="">ASP</a></li> <li><a href="">ASP.NET</a></li> <li><a href="">JSP</a></li> <li><a href="">SQL</a></li> <li><a href="">Flash</a></li> <li><a href="">Dreamweaver</a></li> </ul> <!--[如果lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> <a href="" target="_blank"> 2007-4-16</a> css drop down menu
[​​Ctrl A 全選注:如需引入外部Js需刷新才能執行]