CSS Vertical Menu dengan Hover Effect

Pure CSS Vertical Menu dengan Hover Effect css modul dari Yahoo tanpa javascript didesain dengan style flat dan modern serta valid html5 dengan tanpa menggunakan javascript tentu saja akan membuat web semakin responsif, menu ini juga saya gunakan untuk menu link di sidebar dilengkapi dengan hover effect yang bisa diganti warna backgroundnya sesuai dengan keinginan kita.

berikut ini adalah demonya:

Kode Css:

.pure-menu.pure-menu-horizontal, .pure-menu.pure-menu-horizontal .pure-menu-heading {border: 0;}

.pure-menu.pure-menu-open, .pure-menu.pure-menu-horizontal li

.pure-menu-children {background: #FFFFFF;box-shadow: 0 1px 1px rgba(0,0,0,0.1);}

.pure-menu.pure-menu-horizontal>ul {

display: inline-block;}.pure-menu-open>ul {left: 0;top: 0;visibility: visible;}

.pure-menu-horizontal li {display: inline-block;zoom: 1;vertical-align: middle;}

.pure-menu li {position: relative;}.pure-menu li a {padding:10px 20px;}

.pure-menu a {border: 1px solid transparent;border-left: 0;border-right: 0;}

.pure-menu a, .pure-menu .pure-menu-heading {display: block;line-height: 1.5em;

padding: 5px 20px;text-decoration: none;white-space: nowrap;}

.pure-menu .pure-menu-heading {color: #565d64;text-transform: uppercase;margin-top: 0px;}

.pure-menu a, .pure-menu .pure-menu-heading {display: block;color: #9A9B9B;line-height: 1.5em;

padding: 5px 20px;text-decoration: none;white-space: nowrap;}

.pure-menu li a:hover, .pure-menu li a:focus {color: #fff;background: #059D82;}

.pure-menu ul {left: -10000px;list-style: none;margin: 0;padding: 0;top: -10000px;z-index: 1;}

.pure-menu-heading{font-family:oswald;font-size:16px;font-weight: 800;}