Cute CSS Vertical Menus

Membuat navigasi dengan CSS adalah salah satu elemen paling penting dari desain website.
Pada kesempatan kali ini aku mo share cute vertikal menu.
Contohnya kek gini:

Dan berikut ini CSS & HTML nya:


<div id="extra">
<a href="#">custom link 1</a></div>
<div id="extra">
<a href="#">custom link 2</a></div>
<div id="extra">
<a href="#">custom link 3</a></div>
<div id="extra">
<a href="#">custom link 4</a></div>
<div id="extra">
<a href="#">custom link 5</a></div>
<div id="extra">
<a href="#">custom link 6</a></div>


<style type="text/css">
#extra{ position:relative;  text-align:center}

#extra a{ padding:4px;  margin-bottom:4px;  width:140px;  font-family:consolas;  font-size:10px;  text-transform:uppercase;  letter-spacing:1px;  display:inline-block;  text-align:center;  color:#a1b3a4;  background-color:#fafaf3;  -webkit-transition:all 0.5s ease-in-out;  -moz-transition:all 0.5s ease-in-out;  -o-transition:all 0.5s ease-in-out;  -ms-transition:all 0.5s ease-in-out;  transition:all 0.5s ease-in-out;  border-left:10px solid #e9e2d5;  border-right:10px solid #e9e2d5;  text-shadow:1px 1px #fff}

#extra a:hover{ width:150px;  color:#ce8193;  background-color:#f8e1e5;  border-left:10px solid #da9baa;  border-right:10px solid #da9baa}</style>