當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

兼容IE各版本的纯CSS二级下拉菜单

發布時間：2025/3/21 CSS 28 豆豆

生活随笔收集整理的這篇文章主要介紹了兼容IE各版本的纯CSS二级下拉菜单小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

這是一個標準的CSS下拉菜單制作教程，有針對目前流行的IE6/IE7/IE8不同版本的CSS代碼，因此可以在IE之間完全兼容，不過其它的瀏覽器像火狐/GG瀏覽器之類的沒有測試，如果兼容IE8的話，那么兼容火狐應該問題不大吧。菜單使用藍色基調，滑向二級菜單更換背景，操作的感覺很舒服。

<!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"> <title>純css下拉菜單</title>  <mce:style></mce:style><style mce_bogus="1">body {font-family:verdana, sans-serif; font-size:small; } #navigation , #navigation li ul{padding:0; margin:0;list-style-type: none; } #navigation li {float:left;text-align:center;position:relative; } #navigation li h3 {margin:0; } #navigation li a:link, #navigation li a:visited {display:block; text-decoration:none; color:#000; width:120px; height:40px; line-height:40px; border:1px solid #fff; border-width:1px 1px 0 0; background:#c5dbf2; padding-left:10px; } #navigation li ul {display: none; } table {margin:-1px; border-collapse:collapse; } /* 以下只支持非IE6瀏覽器 */ #navigation li:hover a {color:#fff;background:#2687eb; } #navigation li:hover ul {display:block; position:absolute; top:40px;margin-top:1px;left:0; width:120px; } #navigation li:hover ul li a {display:block; background:#c5dbf2; color:#000; height:20px; line-height:20px; padding:5px 10px; width:110px; } #navigation li:hover ul li a:hover {color:#fff;background:#6b839c; } </styel> </head> <body><ul id="navigation"><li><a href="http://www.codefans.net" mce_href="http://www.codefans.net">源碼愛好者</a><table><tbody><tr><td><ul><li><a href="#" mce_href="#">最新更新</a></li><li><a href="#" mce_href="#">網頁特效</a></li></ul></td></tr></tbody></table></li><li><a href="#" mce_href="#">源碼資源</a><table><tbody><tr><td><ul><li><a href="#" mce_href="#">ASP</a></li><li><a href="#" mce_href="#">PHP</a></li><li><a href="#" mce_href="#">AJAX</a></li></ul></td></tr></tbody></table></li><li><a href="#" mce_href="#">網頁特效</a><table><tbody><tr><td><ul><li><a href="#" mce_href="#">導航</a></li><li><a href="#" mce_href="#">布局</a></li><li><a href="#" mce_href="#">表單</a></li></ul></td></tr></tbody></table></li></ul> </body></html>

<!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 http-equiv="Content-Language" content="zh-CN" /> <title>Anywidth dropdown with centered top and sub levels</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">/* ================================================================ This copyright notice must be kept untouched in the stylesheet at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/anywidth-center-center.html Copyright (c) 2005-2009 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ #menu {width:750px; height:420px; background:url(http://img.imagedash.com/Koew.jpg); text-align:center;} #menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;} #menu ul {display:inline-block;} #menu ul {display:inline;} #menu li {display:inline-block; display:inline;} #menu ul.level1 div {position:absolute; left:-9999px;} #menu ul.level1 {display:table; margin:0 auto; border:1px solid #c0d7e9; border-width:0 1px 1px 1px;} #menu ul.level1 li.level1-li {float:left; display:block; position:relative;} #menu ul.level1 {background:#5a7797;} #menu ul li div ul {background:#c0d7e9; padding:0 1px 1px 1px;} #menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/ #menu a {display:block; font:bold 11px verdana,arial,sans-serif; color:#cde; line-height:25px; text-decoration:none;padding:0 15px 0 15px; text-align:center;} #menu ul.level1 li.level1-li a.level1-a {float:left;} #menu ul li:hover div {left:50%; top:25px;} #menu ul li:hover div ul {display:block; position:relative; left:-50%;} #menu ul li div ul li a {background:#5a7797;} #menu a:hover div {left:0; top:23px;} #menu a:hover div ul {position:relative; left:-50%;} #menu li a.fly {background:transparent url(http://img.imagedash.com/rQ1b.gif) no-repeat right center;} #menu li a:hover, #menu li a.fly:hover {background-color:#5a7797; color:#fc0;} #menu li:hover > a, #menu ul li:hover > a.fly {background-color:#5a7797; color:#fc0;} #menu table {position:absolute; height:0; width:0; left:50%; border-collapse:collapse; margin-top:-4px;}</style> </head> <body><div id="menu"> <ul class="level1"> <li class="level1-li"><a class="level1-a" href="#url" mce_href="#url" _fcksavedurl="#url">Home</a></li> <li class="level1-li"><a class="level1-a fly" href="#url" mce_href="#url" _fcksavedurl="#url">Contact Us</a>  <div> <ul> <li></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Email</a></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Telephone</a></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Online Form</a></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Snail Mail Address</a></li> </ul> </div>  </li> <li class="level1-li"><a class="level1-a fly" href="#url" mce_href="#url" _fcksavedurl="#url">Resort</a>  <div> <ul> <li></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Ski Hire Facilities</a></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Main Ski Slopes</a></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Night Life</a></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Restaurants</a></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Car Hire</a></li> </ul> </div>  </li> <li class="level1-li"><a class="level1-a fly" href="#url" mce_href="#url" _fcksavedurl="#url">Surrounding Area</a>  <div> <ul> <li></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Where to go</a></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">What to do</a></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Places of interest</a></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">National parks & Museums</a></li> </ul> </div>  </li> <li class="level1-li left"><a class="level1-a fly" href="#url" mce_href="#url" _fcksavedurl="#url">Information</a>  <div> <ul> <li></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Money Exchange</a></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Resort Essential Information</a></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Language</a></li> <li><a href="#url" mce_href="#url" _fcksavedurl="#url">Short Breaks</a></li> </ul> </div>  </li> <li class="level1-li"><a class="level1-a" href="#url" mce_href="#url" _fcksavedurl="#url">Privacy</a></li> </ul> </div></body> </html>

Webkit 介紹 CSS 漸變特性差不多有兩年時間了，但由于與大部分瀏覽器不兼容的原因，很少實際應用。值得欣慰的是 Firefox 3.6 + 已經支持 CSS 漸變，我們可以通過樣式呈現漸變效果，而不必創建一個漸變圖像。這篇文章將告訴你如何書寫 CSS 漸變代碼使其兼容主流瀏覽器：IE，Firefox 3.6 +，Safari 和 Chromr。此外，嘗試更新使用了 CSS 漸變的下拉菜單演示。 Webkit 引擎 以下代碼適用于 webkit 引擎的瀏覽器，如 Safari，Chrome 等。它會從頂部 (#ccc) 到底部 (#000) 呈現一個線性漸變。

background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); Firefox 3.6+

background: -moz-linear-gradient(top, #ccc, #000); Internet Explorer 以下的濾鏡代碼只能被 IE 解釋執行：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); 跨瀏覽器 CSS 漸變（演示） 結合將上面的三塊代碼，就是一個跨瀏覽器的漸變效果。注：我添加了一個背景顏色以防用戶使用的瀏覽器不支持該功能。

background: #999; /* for non-css3 browsers */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */ background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */ CSS 漸變下拉菜單 以下是一個使用 CSS3 文字陰影 (text-shadow)，圓角 (radius-border)，陰影 (box-shadow) 的純 CSS 漸變下拉菜單，未涉及任何 JavaScript 或圖片。 ? Internet Explorer 的局限性 IE 的漸變濾鏡不支持多重漸變 (color-stop)，漸變角度 (gradient angle)，徑向漸變 (radial gradient)。這意味著你只能使用 StartColorStr 和 EndColorStr 兩種顏色指定水平或垂直的線性漸變。 結束語 請注意并不是所有瀏覽器都支持 CSS 漸變屬性。為保證安全，在編碼頁面布局時不要依賴于 CSS 漸變，它只適合用來加強樣式表現。 ==================================================================== 一說到下拉菜單每個人都不陌生,下拉菜單的設計看上去非常的簡單：無非是頁面上放置一些鏈接，通過這些鏈接用戶可瀏覽和使用整個網站。事實并非如此，菜單設計是非常復雜和嚴謹的。
????? 今天我就給大家帶來一款兼容所有瀏覽器的CSS下拉菜單，這是前段時間給客戶做的網站，客戶用的360的瀏覽器，所以要做到所有瀏覽器都兼容。支持所有瀏覽器的下拉菜單
演示效果：http://www.56mp.cn/upload/CSSnav/
?HTML部分：
<div class="menu">
? <ul>
?????? <li><a href="http://www.56mp.cn/" target="_self">首頁</a></li>
???
??? <li><a href="http://www.56mp.cn/" target="_self">關于我們</a>

?<ul>
??????????????????? <li><a href="http://www.56mp.cn/">公司簡介</a></li>
??????????????????? <li><a href="http://www.56mp.cn/">公司榮譽</a></li>
??????????????????? <li><a href="http://www.56mp.cn/">公司團隊</a></li>
????? <li><a href="http://www.56mp.cn/">公司業績</a></li>
??????????????????? <li><a href="http://www.56mp.cn/">企業文化</a></li>
????? <li><a href="http://www.56mp.cn/">我們的責任</a></li>
?????????????? </ul>

</li>??
??? <li><a href="http://www.56mp.cn/" target="_self">新聞中心</a>

?<ul>
???????????????????? <li><a href="http://www.56mp.cn/">公司新聞</a></li>
???????????????????? <li><a href="http://www.56mp.cn/">行業新聞</a></li>
?????????????? </ul>

</li>??
??? <li><a href="http://www.56mp.cn/" target="_self">產品展示</a>

?<ul>
??????????????????? <li><a href="http://www.56mp.cn/">綠色產品</a></li>
??????????????????? <li><a href="http://www.56mp.cn/">綠色產品</a></li>
??????????????????? <li><a href="http://www.56mp.cn/">綠色產品</a></li>
????? <li><a href="http://www.56mp.cn/">綠色產品</a></li>
??????????????????? <li><a href="http://www.56mp.cn/">綠色產品</a></li>
????? <li><a href="http://www.56mp.cn/">綠色產品</a></li>
??????????????????? <li><a href="http://www.56mp.cn/"><b>+ 更多產品…</b></a></li>
?????????????? </ul>

</li>??
??? <li><a href="http://www.56mp.cn/" target="_self">研發中心</a>

?<ul>
???????????????????? <li><a href="http://www.56mp.cn/">實驗室</a></li>
???????????????????? <li><a href="http://www.56mp.cn/">研究所</a></li>
???????????????????? <li><a href="http://www.56mp.cn/">工藝室</a></li>
???????????????????? <li><a href="http://www.56mp.cn/">開發室</a></li>
?????????????? </ul>

</li>??
??? <li><a href="http://www.56mp.cn/" target="">人才招聘</a></li>
??? <li><a href="http://www.56mp.cn/" target="">在線留言</a></li>
???
??? <li><a href="http://www.56mp.cn/" target="_self">聯系我們</a></li>
? </ul>
</div>
CSS部分：
/*導航條開始*/
.menu{ height:32px;
?width:758px;
?margin:5px auto;
?background:url(images/menubj.gif) repeat;}
.menu ul{list-style:none;}
.menu li {float:left;position:relative;}
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}
.menu table {position:absolute; top:0; left:0;}
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; padding-top:8px;font-family:"微軟雅黑"; font-weight:bold;}
.menu a{display:block;color:#fff;text-decoration:none;width:88px;line-height:33px; text-align:center;margin-left:6px;font-family:"微軟雅黑";font-weight:bold;}
.menu a:hover{color:#000;background:url(images/nav_bg_hover.jpg) repeat-x; text-decoration:none;margin-left:6px;font-family:"微軟雅黑";font-weight:bold;}
.menu ul ul{}
.menu ul ul li {clear:both;text-align:left;font-size:12px;}
.menu ul ul li a{display:block;width:88px;height:33px;margin-left:3px;border-bottom:1px solid #858585;background:#fbfcfe;color:#000;font-family:"微軟雅黑";font-weight:bold;}
.menu ul ul li a:hover{border:0;background:#e5e5e5;border-bottom:1px solid #e3e4e6;margin-left:3px;font-family:"微軟雅黑";font-weight:bold;}
/*導航條結束*/
如有其他修改不懂的請與本站聯系。

總結

以上是生活随笔為你收集整理的兼容IE各版本的纯CSS二级下拉菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： CSS hack浏览器兼容一览表
下一篇：网页MSN,QQ,Skype,贸易通,雅

3atv精品不卡视频,97人人超碰国产精品最新,中文字幕av一区二区三区人妻少妇,久久久精品波多野结衣,日韩一区二区三区精品

CSS

兼容IE各版本的纯CSS二级下拉菜单

總結