<div class="container">
<svg version="1.1" class="close" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px"
	 viewBox="0 0 42 42" enable-background="new 0 0 42 42" xml:space="preserve">

<path class="path one" fill="#cbcbcb" d="M42,21L42,21c0,1.1-0.9,2-2,2H2c-1.1,0-2-0.9-2-2v0c0-1.1,0.9-2,2-2H40C41.1,19,42,19.9,42,21z" cx="0" cy="0" />
<path class="path two" fill="#cbcbcb" d="M21,42L21,42c-1.1,0-2-0.9-2-2V2c0-1.1,0.9-2,2-2h0c1.1,0,2,0.9,2,2V40C23,41.1,22.1,42,21,42z" cx="10" cy="10" />
<span>Select a value</span>
<ul class="list">
  <li><a href="#">A default value</a></li>
  <li><a href="#">Another one</a></li>
  <li><a href="#">Just one more</a></li>

@import compass

@import "compass/css3/shared"

  font-family: "Helvetica Neue", Arial
  color: #636363
    color: #404040
    color: #cbcbcb

  margin: 200px auto 0
  width: 280px
  border: 3px solid #cbcbcb
  padding: 15px
  overflow: hidden
  +transition(border 0.3s ease)
  backface-visibility: hidden
  > span
    font-size: 20px
    line-height: 32px
    font-weight: bold
    color: #cbcbcb
    padding: 0 5px
    +transition(color 0.3s ease)

      +animate(colorFade, 0.6s, 0s)

    border-color: darken(#cbcbcb, 10%)
    +box-shadow(0 0 14px 0 #efefef)
    > span
      color: darken(#cbcbcb, 10%)
      height: 100px
      opacity: 1

    float: right

    display: none
    list-style-type: none
    padding: 0
    margin: 0
    font-weight: 200
    width: 100%
    margin-top: 10px
    +transition(all 0.3s ease)
    padding: 10px 5px 0
    margin-top: 15px
      text-decoration: none
      font-size: 20px
      color: #cbcbcb
      font-weight: bold
      +transition(color 0.3s ease)

        color: #636363
        color: #636363

      padding: 8px 0

  fill: #cbcbcb
  position: relative
  +transition(all 0.3s ease)
  cursor: pointer

    +transition(all 0.3s ease)
      fill: #404040

      fill: #404040
View Compiled
// Note: 
// There is a file named svg_extend.js which is loaded here.
// It allows us to user add/remove/has class which SVG's
// don't have out of the box.

// Grab our elements
// so we can use them below
var closeIcon =   document.querySelectorAll('svg.close'),
    $container = $('.container'),
    $list = $container.find('ul'),
    $links = $container.find('a'),
    $text = $container.find('span');

// When the '+' icon is clicked...
$(closeIcon).on('click', function() {
    // Add class to rotate icon to an 'x'
    // Toggle the list

// When the icon is hovered, add
// a class to it's parent so we can style it
$(closeIcon).hover(function() {
}, function() {

$links.on('click', function() {
  }, 800);
Run Pen

External CSS

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-44/_animate.sass

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-44/svg_extend.js