當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

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

發(fā)布時(shí)間：2025/3/21 CSS 44 豆豆

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

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

<!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="#">網(wǎng)頁特效</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="#">網(wǎng)頁特效</a><table><tbody><tr><td><ul><li><a href="#" mce_href="#">導(dǎo)航</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 漸變特性差不多有兩年時(shí)間了，但由于與大部分瀏覽器不兼容的原因，很少實(shí)際應(yīng)用。值得欣慰的是 Firefox 3.6 + 已經(jīng)支持 CSS 漸變，我們可以通過樣式呈現(xiàn)漸變效果，而不必創(chuàng)建一個(gè)漸變圖像。這篇文章將告訴你如何書寫 CSS 漸變代碼使其兼容主流瀏覽器：IE，Firefox 3.6 +，Safari 和 Chromr。此外，嘗試更新使用了 CSS 漸變的下拉菜單演示。 Webkit 引擎 以下代碼適用于 webkit 引擎的瀏覽器，如 Safari，Chrome 等。它會(huì)從頂部 (#ccc) 到底部 (#000) 呈現(xiàn)一個(gè)線性漸變。

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 解釋執(zhí)行：

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

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 漸變下拉菜單 以下是一個(gè)使用 CSS3 文字陰影 (text-shadow)，圓角 (radius-border)，陰影 (box-shadow) 的純 CSS 漸變下拉菜單，未涉及任何 JavaScript 或圖片。 ? Internet Explorer 的局限性 IE 的漸變?yōu)V鏡不支持多重漸變 (color-stop)，漸變角度 (gradient angle)，徑向漸變 (radial gradient)。這意味著你只能使用 StartColorStr 和 EndColorStr 兩種顏色指定水平或垂直的線性漸變。 結(jié)束語 請(qǐng)注意并不是所有瀏覽器都支持 CSS 漸變屬性。為保證安全，在編碼頁面布局時(shí)不要依賴于 CSS 漸變，它只適合用來加強(qiáng)樣式表現(xiàn)。 ==================================================================== 一說到下拉菜單每個(gè)人都不陌生,下拉菜單的設(shè)計(jì)看上去非常的簡(jiǎn)單：無非是頁面上放置一些鏈接，通過這些鏈接用戶可瀏覽和使用整個(gè)網(wǎng)站。事實(shí)并非如此，菜單設(shè)計(jì)是非常復(fù)雜和嚴(yán)謹(jǐn)?shù)摹?br />????? 今天我就給大家?guī)硪豢罴嫒菟袨g覽器的CSS下拉菜單，這是前段時(shí)間給客戶做的網(wǎng)站，客戶用的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">關(guān)于我們</a>

?<ul>
??????????????????? <li><a href="http://www.56mp.cn/">公司簡(jiǎn)介</a></li>
??????????????????? <li><a href="http://www.56mp.cn/">公司榮譽(yù)</a></li>
??????????????????? <li><a href="http://www.56mp.cn/">公司團(tuán)隊(duì)</a></li>
????? <li><a href="http://www.56mp.cn/">公司業(yè)績(jī)</a></li>
??????????????????? <li><a href="http://www.56mp.cn/">企業(yè)文化</a></li>
????? <li><a href="http://www.56mp.cn/">我們的責(zé)任</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/">行業(yè)新聞</a></li>
?????????????? </ul>

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

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

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

?<ul>
???????????????????? <li><a href="http://www.56mp.cn/">實(shí)驗(yàn)室</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/">開發(fā)室</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">聯(lián)系我們</a></li>
? </ul>
</div>
CSS部分：
/*導(dǎo)航條開始*/
.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;}
/*導(dǎo)航條結(jié)束*/
如有其他修改不懂的請(qǐng)與本站聯(lián)系。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： CSS hack浏览器兼容一览表
下一篇： CSS滤镜实现火狐、IE兼容

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

CSS

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

總結(jié)