Меню горизонтальное разноцветное на CSS3

<style>
.menu1Holder {position:relative; float:left; overflow:hidden; font:normal bold 11px/35px verdana, sans-serif;margin:30px;}
.menu1Holder .shadow {height:10px; width:90%; left:5%; top:-9px; position:absolute; z-index:100; background:#888;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
-o-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
}
ul.menu1 {margin:0; list-style:none; display:block; float:left; height:100px; position:relative; padding:0 60px;}
ul.menu1 li {margin:0 5px 0 0; float:left;}
ul.menu1 li a {color:#ddd; padding:0 10px; display:block; text-decoration:none;
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
-o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius: 0 0 10px 10px;
-o-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
ul.menu1 li a.red {background:#a00;}
ul.menu1 li a.orange {background:#da0;}
ul.menu1 li a.yellow {background:#aa0;}
ul.menu1 li a.green {background:#060;}
ul.menu1 li a.blue {background:#00a;}
ul.menu1 li a.indigo {background:#2b0062;}
ul.menu1 li a.violet {background:#682bc2;}
ul.menu1 li a:hover {background:#aaa; color:#fff; padding:10px 10px 0 10px;}
ul.menu1 li a.red:hover {background:#c00;}
ul.menu1 li a.orange:hover {background:#fc0;}
ul.menu1 li a.yellow:hover {background:#cc0;}
ul.menu1 li a.green:hover {background:#080;}
ul.menu1 li a.blue:hover {background:#00c;}
ul.menu1 li a.indigo:hover {background:#5b1092;}
ul.menu1 li a.violet:hover {background:#8a2be2;}
</style>
<div class="menu1Holder">
<ul class="menu1">
<li><a href="#url" class="red">М Е Н Ю 1</a></li>
<li><a href="#url" class="orange">М Е Н Ю 2</a></li>
<li><a href="#url" class="yellow">М Е Н Ю 3</a></li>
<li><a href="#url" class="green">М Е Н Ю 4</a></li>
<li><a href="#url" class="blue">М Е Н Ю 5</a></li>
<li><a href="#url" class="indigo">М Е Н Ю 6</a></li>
<li><a href="#url" class="violet">М Е Н Ю 7</a></li>
</ul>
<div class="shadow"></div>
</div>