<h1>color dropdown menu</h1>
<div class="dropdown">
  <h1>choose a color</h1>
  <ul>
    <li data-value="#5790E6"><b>eyes</b> by kersheys</li>
    <li data-value="#8773EB"><b>status</b> by grandiloquent</li>
    <li data-value="#B27CD9"><b>costume party</b> by lemonpaste</li>
    <li data-value="#E884B0"><b>musk stix</b> by the rusty wench</li>
    <li data-value="#EDA180"><b>cymbalic</b> by clairyfairy</li>
  </ul>
</div>

* {
  margin: 0px; padding: 0px;
  border: 0px;
  box-sizing: border-box;
}

html {
  width: 100%; height: 100%;
}

body {
  background: #333;
  font: 14px Tahoma, Geneva, sans-serif;
  text-align: center;
  width: 100%; height: 100%;
}

h1 {
  padding: 50px 0px 20px 0px;
  color: #EEE;
  font-size: 20px;
}

.dropdown {
  margin: 0px auto;
  width: 300px;
  
  &:hover {
    h1 {
      border-radius: 5px 5px 0px 0px;
    }
    
    li {
      padding: 10px;
      border-top: 1px lighten(#333, 2%) solid;
      height: auto;
      overflow: auto;
      opacity: 1;
    }
  }
}

.dropdown h1 {
  display: inline-block;
  padding: 10px;
  position: relative;
  background: darken(#333, 2%);
  color: darken(#EEE, 40%);
  font-size: 14px;
  font-weight: normal;
  text-align: left;
  border: 5px;
  border-radius: 5px;
  width: 100%;
  cursor: pointer;
  transition: all 0.5s linear 0s;
  
  b {
    color: #EEE;
    font-weight: normal;
  }
  
  &:before {
    content: '';
    margin-top: -2px;
    margin-right: 10px;
    display: inline-block;
    background: darken(#EEE, 40%);
    border-radius: 5px;
    vertical-align: middle;
    width: 16px; height: 16px;
  }
  
  &.selected-1:before {
    background: #5790E6;
  }
  
  &.selected-2:before {
    background: #8773EB;
  }
  
  &.selected-3:before {
    background: #B27CD9;
  }
  
  &.selected-4:before {
    background: #E884B0;
  }
  
  &.selected-5:before {
    background: #EDA180;
  }
}

.dropdown ul {
  display: block;
  position: relative;
  list-style: none;
}

.dropdown li {
  padding: 0px 10px;
  background: darken(#333, 2%);
  color: darken(#EEE, 40%);
  text-align: left;
  border: 0px;
  width: 100%; height: 0px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transition-property: all, background-color;
  transition-duration: 0.2s, 0.4s;
  
  b {
    color: #EEE;
    font-weight: normal;
  }
  
  &:hover, &.selected {
    background-color: darken(#333, 4%);
  }
  
  &:last-child {
    border-radius: 0px 0px 5px 5px;
  }
  
  &:before {
    content: '';
    margin-top: -2px;
    margin-right: 10px;
    display: inline-block;
    border-radius: 5px;
    vertical-align: middle;
    width: 16px; height: 16px;
  }
  
  &:nth-child(1) {
    transition-delay: 0s, 0s;
    
    &:before {
      background: #5790E6;
    }
  }
  
  &:nth-child(2) {
    transition-delay: 0.1s, 0s;
    
    &:before {
      background: #8773EB;
    }
  }
  
  &:nth-child(3) {
    transition-delay: 0.2s, 0s;
    
    &:before {
      background: #B27CD9;
    }
  }
  
  &:nth-child(4) {
    transition-delay: 0.3s, 0s;
    
    &:before {
      background: #E884B0;
    }
  }
  
  &:nth-child(5) {
    transition-delay: 0.4s, 0s;
    
    &:before {
      background: #EDA180;
    }
  }
}

$(document).ready(function() {
  $('.dropdown ul li').click(function() {
    $('.dropdown ul li').each(function() {
      if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
      }
    });
    $(this).addClass('selected');
    $('.dropdown h1').html($(this).html()).removeClass().addClass('selected-' + ($(this).index()+1));
  });
});