<ul class="accordion">
  <li class="accordion-header">Passenger Aircraft</li>
  <li class="accordion-item">Airbus</li>
  <li class="accordion-item drop">Boeing</li>
  <li class="accordion-sub-item">Boeing 747</li>
  <li class="accordion-sub-item">Boeing 777</li>
  <li class="accordion-sub-item">Boeing Dreamliner</li>
  <li class="accordion-item">Embraer</li>
  <li class="accordion-item">Douglas</li>
</ul>

body {
  background-color:#dcdcdc;
  margin:10px auto;
  width:250px;
}

.accordion {
  border-radius:5px;
  color:#686868;
  font-family:Arial, Helvetica, sans-serif;
  overflow:hidden;
  width:250px;
  
  li {
    padding-bottom:12px;
    padding-left:40px;
    padding-top:12px;
  }
  
  .accordion-header,
  .accordion-item {
    color:#FFF;
  }
  
  .accordion-header, .accordion-item.drop {
    position:relative;
    &:after {
      border:solid transparent;
      border-width: 7px;
      content:" ";
      height:0;
      left:10px;
      position:absolute;
      pointer-events:none;
      top:100%;
      width:0;
    }
  }
  
  .accordion-header {
    background-color:#2b3c4f;
    &:after {
      border-top-color:#2b3c4f;
    }
  }
  
  .accordion-item {
    background-color:#69afff;
    border-bottom:1px solid rgba(0,0,0,0.2);
    &.drop:after {
      border-top-color:#69afff;
    }
    &:last-child, &.drop {
      border-bottom:none;
    }
  }

  &.accordion-red {
    .accordion-item {
      background-color:#ff7569;
      &.drop:after {
        border-top-color:#ff7569;
      }
    }
  }
  
  .accordion-sub-item {
    background-color:#FFF;
    position:relative;
    &:before {
      background-color:#69afff;
      content:" ";
      height:100%;
      left:-10px;
      position:absolute;
      transition:0.2s;
      top:0;
      width:10px;
    }
    &:hover:before {
      left:0;
    }
  }
}

// I'll build interactivity at some point, as a jQuery plugin and an AngularJS directive.