Cara Membuat Menu Vertical Css3

• Home
• Trik Blog
• Tutorial
• Template
• Download
• About Me
• Contact Me

Copy Scrpit

<style> .rivai_menu{ font: bold 14px Arial; width: 190px; /* lebar menu */ } .rivai_menu ul{ border: 1px solid #eee; padding: 0; margin: 0; list-style: none; } .rivai_menu ul li{ margin:0; padding:0; } .rivai_menu ul li a{ display:block; text-transform: uppercase; color: #494949; padding: 10px 15px; text-decoration: none; border-bottom: 1px solid #cacaca; border-right: 1px solid #a5a5a4; -moz-box-shadow: inset 7px 0 10px rgba(199,100,2, 0.6); -webkit-box-shadow: inset 7px 0 10px rgba(199,100,2, 0.6); box-shadow: inset 7px 0 10px rgba(199,100,2, 0.6); text-shadow: 0 -1px 1px #a0fef8; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .rivai_menu ul li a:hover, .rivai_menu ul li a.selected{ color:#fd0a04; -moz-box-shadow: inset 7px 0 10px rgba(79,102,220, 0.5), inset 0 0 15px rgba(79,102,220, 0.6), inset 0 0 20px rgba(79,102,220, 0.8); -webkit-box-shadow: inset 7px 0 10px rgba(79,102,220, 0.5), inset 0 0 15px rgba(79,102,220, 0.6), inset 0 0 20px rgba(79,102,220, 0.8); box-shadow: inset 7px 0 10px rgba(79,102,220, 0.5), inset 0 0 15px rgba(79,102,220, 0.6), inset 0 0 20px rgba(79,102,220, 0.8); } </style> <div class="rivai_menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Trik Blog</a></li> <li><a href="#">Tutorial</a></li> <li><a href="#">Template</a></li> <li><a href="#">Download</a></li> <li><a href="#">About Me</a></li> <li><a href="http://rivai-silaban.blogspot.com/">Contact Me</a></li> </ul> </div>