/*accordion menu trik blogger **********************************/ .verticalaccordion>ul { margin: 0; padding: 0; list-style:none; width: 300px; } .verticalaccordion>ul>li { display:block; overflow: hidden; margin: 0; padding: 0; list-style:none; height:40px; width: 300px; /* Decorative CSS */ background-color:#f0f0f0; /* CSS3 Transition Effect */ transition: height 0.3s ease-in-out; -moz-transition: height 0.3s ease-in-out; -webkit-transition: height 0.3s ease-in-out; -o-transition: height 0.3s ease-in-out; } .verticalaccordion>ul>li>h3 { display:block; margin: 0; padding:10px; height:19px; /* Decorative CSS */ border-top:#f0f0f0 1px solid; font-family: Arial, Helvetica, sans-serif; text-decoration:none; text-transform:none; color: #000; background: #cccccc; /* CSS3 Gradient Effect */ background: -moz-linear-gradient( top, #999999, #cccccc); background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE 7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; /* IE 8 */ } .verticalaccordion>ul>li>div { margin:0; overflow: auto; padding:10px; height:220px; } .verticalaccordion>ul>li:hover { height: 280px; } .verticalaccordion:hover>ul>li:hover>h3 { /* Decorative CSS */ color:#fff; background: #718fa8; -webkit-border-top-right-radius:15px; -moz-border-radius-topright:15px; -webkit-border-top-right-radius:15px; -moz-border-radius-topright:15px -webkit-border-bottom-right-radius:15px; -moz-border-radius-bottomright:15px; -webkit-border-bottom-right-radius:15px; -moz-border-radius-bottomright:15px /* CSS3 Gradient Effect */ background: -moz-linear-gradient ( top, #454545, #000000); /* FF, Flock */ background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)"; /* IE 8 */ } .verticalaccordion>ul>li>h3:hover { cursor:pointer;} Sumber Menu Accordion Dengan CSS3 Tanpa JavaScript >>Tutorial Blogger >> Tutorial Komputer >> Free Download Anti Virus >> Browser Internet http://trik-blogger-andreas.blogspot.com/2011/02/menu-accordion-dengan-css3-tanpa.html#ixzz1EpcpTlOV -->