Horizontal Tabs Navigasi Menu

Horizontal Tabs Menu ini adalah masih sama seperti artikel saya sebelumnya mengenai menu dropdown tanpa javascript, namun bedanya pada tampilan menu yang lebih menarik karena tampilan yang berwarna-warni.

DEMO | DOWNLOAD
CSS:

1. <style type="text/css"> 
2. /* hrizontal menu */ 
3. .cp-menuHolder {position:relative; float:leftleft; overflow:hidden; font:normal bold 11px/35px verdana, sans-serif;} 
4. .cp-menuHolder .shadow {height:10px; width:90%; leftleft:5%; top:-9px; position:absolute; z-index:100; background:#888; 
5. -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1); 
6. -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1); 
7. -o-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1); 
8. box-shadow: 0px 0px 20px rgba(0, 0, 0, 1); 
9. } 
10. ul.cp-menu {margin:0; list-style:none; display:block; float:leftleft; height:100px; position:relative; padding:0 60px;} 
11.  
12. ul.cp-menu li {margin:0 5px 0 0; float:leftleft;} 
13.  
14. ul.cp-menu li a {color:#ddd; padding:0 10px; display:block; text-decoration:none; 
15. -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9); 
16. -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9); 
17. -o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9); 
18. box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9); 
19.  
20. -webkit-border-bottom-rightright-radius: 10px; 
21. -webkit-border-bottom-leftleft-radius: 10px; 
22. -moz-border-radius: 0 0 10px 10px; 
23. -o-border-radius: 0 0 10px 10px; 
24. border-radius: 0 0 10px 10px; 
25.  
26. -webkit-transition: all 0.2s ease-in-out; 
27. -moz-transition: all 0.2s ease-in-out; 
28. -o-transition: all 0.2s ease-in-out; 
29. transition: all 0.2s ease-in-out; 
30.  
31.  
32. } 
33. ul.cp-menu li a.red {background:#a00;} 
34. ul.cp-menu li a.orange {background:#da0;} 
35. ul.cp-menu li a.yellow {background:#aa0;} 
36. ul.cp-menu li a.green {background:#060;} 
37. ul.cp-menu li a.blue {background:#00a;} 
38. ul.cp-menu li a.indigo {background:#2b0062;} 
39. ul.cp-menu li a.violet {background:#682bc2;} 
40.  
41.  
42. ul.cp-menu li a:hover {background:#aaa; color:#fff; padding:10px 10px 0 10px;} 
43.  
44. ul.cp-menu li a.red:hover {background:#c00;} 
45. ul.cp-menu li a.orange:hover {background:#fc0;} 
46. ul.cp-menu li a.yellow:hover {background:#cc0;} 
47. ul.cp-menu li a.green:hover {background:#080;} 
48. ul.cp-menu li a.blue:hover {background:#00c;} 
49. ul.cp-menu li a.indigo:hover {background:#5b1092;} 
50. ul.cp-menu li a.violet:hover {background:#8a2be2;} 
51. </style> 

HTML:

1. <div class="cp-menuHolder"> 
2. <ul class="cp-menu"> 
3. <li><a href="#url" class="red">PRODUCTS</a></li> 
4. <li><a href="#url" class="orange">SERVICES</a></li> 
5. <li><a href="#url" class="yellow">DEMOS</a></li> 
6. <li><a href="#url" class="green">MENUS</a></li> 
7. <li><a href="#url" class="blue">LAYOUTS</a></li> 
8. <li><a href="#url" class="indigo">CONTACT</a></li> 
9. <li><a href="#url" class="violet">PRIVACY</a></li> 
10. </ul> 
11. <div class="shadow"></div> 
12. </div>