Css3 Red Menu

Awesome Css3 Red Menu, ehmm beberapa hari gak update karena bingung mau update apa jadi kali ini update tentang menu lagi yaitu, Horizontal Css3 Red Menu menu ini terdapat di template bang Choen, tapi sayang nya bang Choen sekarang dah menutup blog nya yaitu deconstructioncode padahal disana banyak tutorial² Yang bermanfaat.

DEMO

Menu ini warna merah dan mempesona menurutku, menu ini hanya saya beri efek transisi dimana sebelumnya gak ada transisinya, dan transisinya hanya bekerja di browser modern gunanya sih untuk memperlembut gerakan saat menu di sentuh atau di hover menu ini juga mempunyai deskripsi di bawah nama menu nya.

<div id='navigation-wrap'>
<div id='navigation'>
<ul id='nav'>
<li><a href='#'>HOME<span>Welcome</span></a></li>
<li><a href='#'>ABOUT<span>Personal Oveview</span></a></li>
<li><a href='#'>CONTACT<span>Say Hello or ...?</span></a></li>
<li><a href='#'>SITEMAP<span>Table Of Content</span></a></li>
<li><a href='#'>NAMA MENU<span>Deskripsi menu</span></a></li>
<li><a href='#'>NAMA MENU<span>Deskripsi menu</span></a></li>
</ul>
</div>
</div>

<style>
#navigation-wrap {
width:900px;
height:45px;
background:#d50c0c;
margin:0 auto;
}
#navigation {
line-height:15px;
letter-spacing:.05em;
}
ul#nav {
list-style:none;
margin:0 20px 0;
}
ul#nav li{
float:left;
margin-top:1px;
}
ul#nav li a span{
display:block;
font-weight:400;
text-shadow:1px 1px 1px #e14343;
color:#000;
text-decoration: none;
}
ul#nav li a{
color:#fff;
display:block;
font-weight:700;
margin:0 2px;
padding:7px 15px;
text-align:center;
background:#b81010;
text-shadow:1px 1px 1px #000;
border-left:1px solid #b81010;
border-right:1px solid #b81010;
text-decoration: none;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s
}
ul#nav li a:hover{
margin-top:-8px;
*margin-top:0;
padding:8px 15px 10px;
*padding:7px 15px;
background:#aa0f0f;
text-decoration:none;
border-left:1px solid #df1212;
border-right:1px solid #df1212;
}
/*
ul#nav li a:visited{
background:#aa0f0f;
border-left:1px solid #df1212;
border-right:1px solid #df1212;
}
*/
ul#nav li a:active{
background:#9a0e0e;
text-decoration:none;
border-left:1px solid #df1212;
border-right:1px solid #df1212;
}
</style>

Kemudian klik simpan, Tapi Satu yang harus di ingat menu ini berukuran 900px jadi silahkan simpan menu nya di Area yang lebar agar menu nya gak berantakan. wassalam