CSS IE6，IE7，IE8的阴影和渐变填充

Posted 2021-05-23

See full code working on: http://www.cssplay.co.uk/menus/css3-ie-dropdown.html


CSS:
===============
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/css3-ie-dropdown.html
Copyright (c) 2005-2010 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.shadow {float:left; width:650px;}
.color {position:relative; background:#fff; display:block; background:#0bf;
-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.7)));
background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
}
.menu {padding:0; margin:0; list-style:none; height:35px;}
.menu .subHolder {position:absolute; left:-9999px;}
.menu ul {padding:5px 0; margin:0; list-style:none; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#20000000', EndColorStr='#A0000000');}
.menu li {float:left;}
.menu li a {color:#ccc; line-height:35px; display:block; float:left; padding:0 20px; text-decoration:none; font-family:arial, sans-serif; font-size:12px; font-weight:bold;}
.menu li:hover {position:relative;}
.menu li a:hover {color:#fff; white-space:nowrap; position:relative; text-decoration:none;}
.menu li:hover > a {color:#fff;}
.menu :hover .subHolder {left:0; top:34px;}

.menu .subShadow {float:left;}
.menu .subColor {position:relative; display:block; margin-left:4px; margin-top:5px; height:100%;
-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}
.menu .col1 {background:#fb1;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.7)));
background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
}
.menu .col2 {background:#8c8;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.7)));
background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
}
.menu .col3 {background:#f31;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.7)));
background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
}
.menu .col4 {background:#79b;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.7)));
background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
}

.menu ul li {float:none;}
.menu ul li a {white-space:nowrap; line-height:20px; padding:0 30px 0 10px; float:none;}

.menu table {border-collapse:collapse; width:0; margin:0 0 -1px 0;}
</style>

<!--[if IE]>
<style type="text/css">
.menu ul li {float:left;}

.color {left:4px; top:4px;}
.shadow {float:left; display:block; background:#000; margin:-5px -5px; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='4', MakeShadow='true', ShadowOpacity='0.60');}
.menu {filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#20000000', EndColorStr='#A0000000');}
.menu ul {height:100%; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#20000000', EndColorStr='#A0000000');}

.menu .subShadow {background:#000; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='true', ShadowOpacity='0.40');}
.menu li a:visited {color:#ccc;}
.menu li a:visited:hover {color:#fff;}

* html .menu .subColor {width:1px;}
* html .menu ul {width:1px;}

</style>
<![endif]-->