<div class="center-table">
  <div class="center-cell">
    <div id="select-box">
      <h2>Select Box Experiment</h2>
      <select name="Names" id="names">
        <option value="ted">Ted</option>
        <option value="barney">Barney</option>
        <option value="marshal">Marshal</option>
        <option value="lily">Lily</option>
        <option value="robin">Robin</option>
      </select>
      <br />
      <ul class="faux-select" data-selected-value="ted">
        <li class="selected-option"><span>Ted</span>
          <ul class="options">
            <li data-value="ted">Ted</li>
            <li data-value="barney">Barney</li>
            <li data-value="marshal">Marshal</li>
            <li data-value="lily">Lily</li>
            <li data-value="robin">Robin</li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

html,body {height:100%; position:relative; background:#46465A;}
.center-table {display:table; width:100%; height:100%;
  .center-cell {display:table-cell; vertical-align:middle;}
}

#select-box {min-width:320px; max-width:30%; width:100%; margin:0 auto; padding:2em; text-align:center; background:#fff;}

.faux-select {list-style-type:none; padding: 0.4em 0; background:#46465A; color:#fff; text-align:left; border:3px solid #000; cursor:pointer; width:150px; display:inline-block; position:relative;
  li {padding:0; text-indent:1em; position:relative;
    .options {display:block; list-style-type:none; padding:0; margin:0.4em 0 0 0; background:transparent; position:absolute; width:100%; max-height:0px; overflow:hidden; border:3px solid transparent; top:1.2em; left:-0.2em; transition:all ease 0.25s;
      li {padding:0.4em 0; border-bottom:1px solid rgba(255,255,255,0.4);
        &:hover {background:rgba(255,255,255,0.2);}
        &:last-of-type{border-bottom:0;}
      }
    }
    .options.open{background:#2F2F3F; max-height:1000%; border:3px solid #000; border-top:3px solid transparent;}
  }
  &:before {content:''; width: 0; height: 0; border-left: 0.5em solid transparent;	border-right: 0.5em solid transparent;	border-top: 0.8em solid #fff; position:absolute; top:0.5em; right:1em; transition:all ease 0.25s;}
}

.faux-select.open{
  &:before {border-left: 0.5em solid transparent;	border-right: 0.5em solid transparent;	border-bottom: 0.8em solid #fff; border-top:0;}
}

$('.faux-select').click(function(){
  $(this).toggleClass('open');
  $('.options',this).toggleClass('open');
});

$('.options li').click(function(){
  var selection = $(this).text();
  var dataValue = $(this).attr('data-value');
  $('.selected-option span').text(selection);
  $('.faux-select').attr('data-selected-value',dataValue);
});