HTML CSS3 Accordion Menu

<! DOCTYPE html>
 CSS: 
 
* {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} Body {font-family:arial, sans-serif;font-weight:normal;font-size:12px;background: #3f4348 url ('/HTTP/ Www.frecosse.com/workshop/accordion_menu/bg.png ');} UL {list-style:none;margin:0; padding:0;width:300px;margin:0 auto;-moz-box-shadow:0 0 5px #111;-webkit-box-shadow:0 0 5px #111; box-shadow:0 0 5px #111;}  UL Li label {background: #575e63;/* fallback colour */border-top:1px solid #878e98; border-bottom:1px solid #33373d; color: #fff; text-shadow:0 1px 1px #000; Letter-spacing:0.09em;background:-webkit-gradient (Linear, 0% 0, 0% 100%, from (#575e6 3), to (#3f4347)); background:-webkit-linear-gradient (top, #575e63, #3f4347); background:-moz-linear-gradient (Top, # 575e63, #3f4347); background:-ms-linear-gradient (top, #575e63, #3f4347) Background:-o-linear-gradient (top, #575e63, #3f4347);} UL li input[type= ' checkbox ' {display:none;} UL Li label {display:block;padding:12px;width:300px;} UL Li I {font-size:18px; vertical-align:middle;width:20px;display:inline-block;} Ul Li span {display:inline;float:right;background: #48515c; border:1px solid #3c434c; border-bottom:1px solid #707781; padding:4px 6px;font-size:10px;-moz-border-radius:12px;border-radius:12px;-moz-box-shadow:inset 0 0 10px #111;- Webkit-box-shadow:inset 0 0 10px #111; Box-shadow:inner 0 0 10px #111;p osition:relative;} UL Li Label:hover {background: #566f82;/* fallback colour */background:-webkit-gradient (Linear, 0% 0, 0% 100%, from (#56 6f82), to (#3e505e)); background:-webkit-linear-gradient (top, #566f82, #3e505e); background:-moz-linear-gradient (top , #566f82, #3e505e); background:-ms-linear-gradient (top, #566f82, #3e505e); background:-o-linear-gradient (Top, # 566f82, #3e505e);} UL Li Label:hover span {background: #3e505e;} UL li input[type= ' checkbox ']:checked ~ label {color:orange; background: #44c6eb;/* Fallback colour */border-top:1px s Olid #878e98; border-bottom:1px solid #2799db; background:-webkit-gradient (linear, 0% 0%, 0% 100%, from (#44c6eb), to (#2799db)); background:-webkit-linear-gradient (top, #44c6eb, #2799db); background:- Moz-linear-gradient (Top, #44c6eb, #2799db); background:-ms-linear-gradient (top, #44c6eb, #2799db); background:- O-linear-gradient (Top, #44c6eb, #2799db);} UL li input[type= ' checkbox ']:checked ~ label span {background: #2173a1;/* fallback colour */border-top:1px solid #1b5f85; border-bottom:1px solid #4cb1e4;-moz-box-shadow:inset 0 0 5px #111-webkit-box-shadow:inset 0 0 5px #111 box-shadow:inn ER 0 0 5px #111;} UL li input[type= ' checkbox ']:checked ~. Options {height:auto;display:block;min-height:40px;max-height:400px;} UL ul {background: #fff; margin:0 padding:0;-moz-box-shadow:inset 0 2px 2px #b3b3b3-webkit-box-shadow:inset 0 2px 2px # B3b3b3;box-shadow:inner 0 2px 2px #b3b3b3;} UL ul Li a {display:block;padding:6px 12px;color: #999; text-decoration:none;} UL ul li a:hover {color: #44c6eb;} UL ul Li a span {color: #999; background:none;border:1px solid #ccc;-moz-box-shadow:none;-webkIt-box-shadow:none;box-shadow:none;} Ul ul Li {border-bottom:1px solid #ccc;} UL ul li:first-child {padding-top:6px;} UL ul li:last-child {padding-bottom:6px; border:0;}. Options {Height:0;display:block;overflow:hidden;} /* Abridged Icomoon font styles/* (Hosted on frecosse-please don ' t hotlink!) =============================================== @font-face {font-family: ' Icomoon '; src:url ('/HTTP/ Www.frecosse.com/workshop/accordion_menu/icomoon.eot '); Src:url (' Http://www.frecosse.com/workshop/accordion_ Menu/icomoon.eot #iefix ') format (' Embedded-opentype '), url (' http://www.frecosse.com/workshop/accordion_menu/ Icomoon.woff ') format (' Woff '), url (' Http://www.frecosse.com/workshop/accordion_menu/icomoon.ttf ') format (' TrueType '), url (' http://www.frecosse.com/workshop/accordion_menu/icomoon.svg#icomoon ') format (' SVG '); font-weight : Normal;font-style:normal;}. Icon-music:before,. Icon-search:before,. Icon-fire:before,. Icon-dribbble:before,. Icon-flickr:before,. Icon-deviantart:before,. Icon-picassa:Before,. Icon-reddit:before,. Icon-android:before,. Icon-users:before,. Icon-film:before,. Icon-eye:before,. Icon-point-right:before,. Icon-microphone:before,. Icon-download:before,. Icon-warning:before,. Icon-images:before ,. Icon-movie:before,. Icon-cloud:before {font-family: ' Icomoon '; speak:none;font-style:normal;font-weight:normal; line-height:1;-webkit-font-smoothing:antialiased;}. Icon-music:before {content: "\61";}. Icon-search:before {content: "\62";}. Icon-fire:before {content: "\63";}. Icon-dribbble:before {content: "\64";}. Icon-flickr:before {content: "\65";}. Icon-deviantart:before {content: "\66";}. Icon-picassa:before {content: "\67";}. Icon-reddit:before {content: "\68";}. Icon-android:before {content: "\69";}. Icon-users:before {content: "\6a";}. Icon-film:before {content: "\6b";}. Icon-eye:before {content: "\6c";}. Icon-point-right:before {content: "\6d";}. Icon-microphone:before {content: "\6e";}. Icon-download:before {content: "\6f";}. Icon-warning:Before {content: "\70";}. Icon-images:before {content: "\71";}. Icon-movie:before {content: "\72";}. Icon-cloud:before {content: "\73";} */
　　
　　
HTML CSS3 Accordion Menu