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

来源：互联网发布：人力资源网络培训编辑：程序博客网时间：2024/04/29 16:42

这是一个标准的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 atall times.The original version of this stylesheet and the associated (x)htmlis available at http://www.cssplay.co.uk/menus/anywidth-center-center.htmlCopyright (c) 2005-2009 Stu Nicholls. All rights reserved.This stylesheet and the associated (x)html may be modified in anyway 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;}
/*导航条结束*/
如有其他修改不懂的请与本站联系。