ul.accordion
  li.has-sub
    label for="menu1" Menu #1
    input#menu1 type="checkbox" name="menu"
    ul.sub
      li: a Item #1
      li: a Item #2
      li: a Item #3
  li.has-sub
    label for="menu2" Menu #2
    input#menu2 type="checkbox" name="menu"
    ul.sub
      li: a Item #1
      li: a Item #2
  li.has-sub
    label for="menu3" Menu #3
    input#menu3 type="checkbox" name="menu"
    ul.sub
      li: a Item #1
      li: a Item #2
      li: a Item #3
      li: a Item #4
      li: a Item #5
      li: a Item #6


p: em Checkbox can be replaced by radio to have one accordion at time, usable only when links height is known...

@import bourbon

body
  background: #222
  color: #fff
  -webkit-font-smoothing: antialiased
.accordion
  max-width: 300px
  margin: 5em
  padding: 0
  background: #333
  border-radius: 3px
  overflow: hidden
  ul
    margin: 0
    padding: 0
  li
    display: block
  label
    cursor: pointer
    display: block
    padding: 0.7em 1em
    overflow: hidden
    background: linear-gradient(#555,#444)
    border-bottom: 1px solid #333
    box-shadow: inset 0 1px 1px rgba(#fff,0.2)
    &:hover
      background: linear-gradient(#666,#444)
  input[type="radio"],
  input[type="checkbox"]
    display: none
  .sub > li
    cursor: pointer
    overflow: hidden
    height: 0
    margin: 0
    opacity: 0
    font-size: 0.875em
    transition: all 0.25s ease-in-out
    box-shadow: inset 0 -1px 0 #555
    &:hover
      padding-left: 1.5em
      background: rgba(0,0,0,0.1)
  input:checked + .sub > li
    padding: 0.7em 1em
    height: 1.4em
    opacity: 1