Help with customizing a CSS main navigation menu

<style type="text/css">
body {
background-color:#111;
margin:0px 0px;
padding:50px; 
}

#shutter-menu {
font:normal 12px 'Trebuchet MS',Arial,Sans-Serif;
color:white;
text-transform:uppercase; 
}

#shutter-menu ul {
height:50px;
margin:0px 0px;
padding:0px 0px;
overflow:hidden; 
}

#shutter-menu li {
float:left;
display:inline;
list-style:none;
margin:0px 0px;
padding:0px 0px; 
}

#shutter-menu a,
#shutter-menu a:before {
display:block;
margin:0px 0px;
padding:0px 30px;
line-height:50px;
color:white;
text-decoration:none;
background-color:#900;
background-image:-webkit-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-moz-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-ms-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-o-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
-webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
-moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
position:relative;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

#shutter-menu a:before {
content:attr(data-clone);
position:absolute;
top:100%;
left:0px;
display:block;
background-color:white;
background-image:-webkit-linear-gradient(top, #ddd, white);
background-image:-moz-linear-gradient(top, #ddd, white);
background-image:-ms-linear-gradient(top, #ddd, white);
background-image:-o-linear-gradient(top, #ddd, white);
background-image:linear-gradient(top, #ddd, white);
border-top:2px solid rgba(0,0,0,0.2);
color:#333; 
}

#shutter-menu a:hover {
margin-top:-50px;
margin-bottom:1px;
}
</style>

<nav id="shutter-menu">
<ul>
<li><a href="#" data-clone="Home">Home</a></li>
<li><a href="#" data-clone="About">About</a></li>
<li><a href="#" data-clone="Portfolio">Portfolio</a></li>
<li><a href="#" data-clone="Comments">Comments</a></li>
<li><a href="#" data-clone="Contact">Contact</a></li>
</ul>
</nav>