<style type="text/css">
.main {
	width: 900px;
	margin: 0 auto;
	padding-top: 30px;
}
/* отражаем текст */
.h1-css {
	color: #000066;
	font-size: 24px;
	margin-bottom: 30px;
	position: relative;
	line-height: 24px;
}
.h1-css:after,
.menu-css a:after {
	content: attr(title);
	position:absolute;
	left:0;
	top:100%;
	width:100%;
	height:100%;
	-moz-transform: scaleY(-1);
	-o-transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
	-ms-transform: scaleY(-1);
	transform: scaleY(-1);
	z-index: 1;
}
.h1-css:before,
.menu-css:before {
	content: "";
	display: block;
	width: 100%;
	height: 80%;
	background:-moz-linear-gradient(top, rgba(255,255,255,0.7), rgba(255,255,255,1));
	background: -o-linear-gradient(top, rgba(255,255,255,0.7), rgba(255,255,255,1));
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.7)), to(rgba(255,255,255,1)));
	position: absolute;
	left: 0;
	top: 110%;
	z-index: 2;
}
ul {
	list-style: none;
	margin-bottom: 30px;
}
li {
	display: inline;
	margin-right: 30px;
	color: #000099;
}
li a {
	text-decoration: none;
	font-size: 14px;
	color: #000099;
	display: inline-block;
	position: relative;
}
li a:hover {
	color: #FF0000;
}
.menu-css {
	position: relative;
}
</style>

<!--[if lte IE 9]>
<style>
.h1-after,
.menu-after {
	position:absolute;
	left:0;
	top:100%;
	z-index: 1;
	background: #fff;
	-ms-filter: "flipV progid:DXImageTransform.Microsoft.Alpha(opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=70)";
	filter: flipV progid:DXImageTransform.Microsoft.Alpha(opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=70);
}
.h1-css:after,
.menu-css a:after {
	display: none;
}
</style>
<script>
textReflect = function()
{
	// отражение для заголовка
	var el = document.getElementsByTagName("h1")[0];
	el.insertAdjacentHTML("afterBegin", "<span class='h1-after'>"+el.firstChild.nodeValue+"</span>");

	// отражения для меню
	var menu = document.getElementsByTagName("a"),
		i,
		lenMenu = menu.length;

	for(i=0;i<lenMenu;i++) menu[i].insertAdjacentHTML("afterBegin", "<span class='menu-after'>"+menu[i].firstChild.nodeValue+"</span>");

}
	window.onload=textReflect;

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

<div class="main">
<div class="h1-css" title="Пример CSS отражения">Пример CSS отражения</div>
	<ul class="menu-css">
	<li><a href="#" title="Главная">Главная</a></li>
	<li><a href="#" title="О компании">О компании</a></li>
	<li><a href="#" title="Каталог">Каталог</a></li>
	<li><a href="#" title="Наши контакты">Наши контакты</a></li>
	</ul>
</div>