<style>
.dsblue {padding:0; margin:35px auto 80px auto; list-style:none; height:50px; width:714px; overflow:hidden;border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.dsblue li {float:left;}
.dsblue li a {display:block; float:left; width:100px; line-height:50px; text-align:center; font-family:arial, sans-serif; font-size:13px; text-decoration:none; font-weight:bold; border-right:1px solid #333; border-left:1px solid #ccc;
-moz-transition: 0.40s;
-ms-transition: 0.40s;
-o-transition: 0.40s;
-webkit-transition: 0.40s;
transition: 0.40s;
}
.dsblue li a b {display:block; width:0; height:0; border-left:50px solid blue; border-right:50px solid blue; border-bottom:20px solid black; overflow:hidden;}
.dsblue li a:before {content: attr(rel); background-color:blue; color:#fff; display:block; width:100px; height:50px; text-align:center;
background-image: -moz-linear-gradient(-90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
background-image: -webkit-linear-gradient(-90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
background-image: -ms-linear-gradient(-90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
background-image: -o-linear-gradient(-90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
background-image: linear-gradient(-90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
}
.dsblue li a:after {content: attr(rel); background-color:black; color:blue; display:block; width:100px; height:50px; text-align:center;
background-image: -moz-linear-gradient(0deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
background-image: -webkit-linear-gradient(90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
background-image: -ms-linear-gradient(90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
background-image: -o-linear-gradient(90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
background-image: linear-gradient(90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
}
.dsblue li a:hover {margin-top:-70px;}
</style>
<ul class="dsblue">
<li><a href="#" rel="Menu"><b>Menu</b></a></li>
<li><a href="#" rel="Menu"><b>Menu</b></a></li>
<li><a href="#" rel="Menu"><b>Menu</b></a></li>
<li><a href="#" rel="Menu"><b>Menu</b></a></li>
<li><a href="#" rel="Menu"><b>Menu</b></a></li>
<li><a href="#" rel="Menu"><b>Menu</b></a></li>
<li><a href="#" rel="Menu"><b>Menu</b></a></li>
</ul>

<style>
.dsred {padding:0; margin:35px auto 80px auto; list-style:none; height:50px; width:714px; overflow:hidden;border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.dsred li {float:left;}
.dsred li a {display:block; float:left; width:100px; line-height:50px; text-align:center; font-family:arial, sans-serif; font-size:13px; text-decoration:none; font-weight:bold; border-right:1px solid #333; border-left:1px solid #ccc;
-moz-transition: 0.40s;
-ms-transition: 0.40s;
-o-transition: 0.40s;
-webkit-transition: 0.40s;
transition: 0.40s;
}
.dsred li a b {display:block; width:0; height:0; border-left:50px solid red; border-right:50px solid red; border-bottom:20px solid black; overflow:hidden;}
.dsred li a:before {content: attr(rel); background-color:red; color:#fff; display:block; width:100px; height:50px; text-align:center;
background-image: -moz-linear-gradient(-90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
background-image: -webkit-linear-gradient(-90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
background-image: -ms-linear-gradient(-90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
background-image: -o-linear-gradient(-90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
background-image: linear-gradient(-90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
}
.dsred li a:after {content: attr(rel); background-color:black; color:red; display:block; width:100px; height:50px; text-align:center;
background-image: -moz-linear-gradient(0deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
background-image: -webkit-linear-gradient(90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
background-image: -ms-linear-gradient(90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
background-image: -o-linear-gradient(90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
background-image: linear-gradient(90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
}
.dsred li a:hover {margin-top:-70px;}
</style>
<ul class="dsred">
<li><a href="#" rel="Menu"><b>Menu</b></a></li>
<li><a href="#" rel="Menu"><b>Menu</b></a></li>
<li><a href="#" rel="Menu"><b>Menu</b></a></li>
<li><a href="#" rel="Menu"><b>Menu</b></a></li>
<li><a href="#" rel="Menu"><b>Menu</b></a></li>
<li><a href="#" rel="Menu"><b>Menu</b></a></li>
<li><a href="#" rel="Menu"><b>Menu</b></a></li>
</ul>

<style>
.dsgreen {padding:0; margin:35px auto 80px auto; list-style:none; height:50px; width:714px; overflow:hidden;border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.dsgreen li {float:left;}
.dsgreen li a {display:block; float:left; width:100px; line-height:50px; text-align:center; font-family:arial, sans-serif; font-size:13px; text-decoration:none; font-weight:bold; border-right:1px solid #333; border-left:1px solid #ccc;
-moz-transition: 0.40s;
-ms-transition: 0.40s;
-o-transition: 0.40s;
-webkit-transition: 0.40s;
transition: 0.40s;
}
.dsgreen li a b {display:block; width:0; height:0; border-left:50px solid green; border-right:50px solid green; border-bottom:20px solid indigo; overflow:hidden;}
.dsgreen li a:before {content: attr(rel); background-color:green; color:#fff; display:block; width:100px; height:50px; text-align:center;
background-image: -moz-linear-gradient(-90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
background-image: -webkit-linear-gradient(-90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
background-image: -ms-linear-gradient(-90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
background-image: -o-linear-gradient(-90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
background-image: linear-gradient(-90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
}
.dsgreen li a:after {content: attr(rel); background-color:indigo; color:#000; display:block; width:100px; height:50px; text-align:center;
background-image: -moz-linear-gradient(0deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
background-image: -webkit-linear-gradient(90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
background-image: -ms-linear-gradient(90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
background-image: -o-linear-gradient(90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
background-image: linear-gradient(90deg, rgba(242, 242, 242,0.4), rgba(242, 242, 242,0));
}
.dsgreen li a:hover {margin-top:-70px;}
</style>
<ul class="dsgreen">
<li><a href="#" rel="Menu"><b>Menu</b></a></li>
<li><a href="#" rel="Menu"><b>Menu</b></a></li>
<li><a href="#" rel="Menu"><b>Menu</b></a></li>
<li><a href="#" rel="Menu"><b>Menu</b></a></li>
<li><a href="#" rel="Menu"><b>Menu</b></a></li>
<li><a href="#" rel="Menu"><b>Menu</b></a></li>
<li><a href="#" rel="Menu"><b>Menu</b></a></li>
</ul>