<ul>
  <li>

<div class="typesort-c">
  <select id="typesort">
    <option selected>Highest Rank</option>
    <option>Most Comments</option>
    <option>Most Viewed</option>
    <option>Lowest Rank</option>
  </select>
    </div>
    </li>
<li>              
<div class="timesort-c">
   <select id="timesort">
<option>Kickboxing</option>
<option>Mma</option>
<option>Wakeboard</option>
<option>Motocross</option>
<option>Freeskiing</option>
<option>Snowboard</option>
<option>Surf</option>
<option>Skateboard</option>
<option>Bmx</option>
<option>Sup</option>
<option>Kiteboarding</option>
  </select>
  </div>
</li>   
  <li><div class="test">testing position </div></li>    
</ul>                          
                            
                            
                            

*, *:after, *:before { 
	box-sizing:         border-box; 
}

html {
  padding:2%;
background: #121112;
}

$red: #ff0036;
$blue: #0096ff; 
$grey: #acbeca; 


ul{
  li{display:inline-block;}
}

.fancy-select {
  position: relative;
  //font-weight: bold;
  //text-transform: uppercase;
  //font-size: 13px;
  color: #46565D;
  &.disabled {
    opacity: 0.5;
  }
  select:focus + div.trigger {
    //box-shadow: 0 0 0 2px #4B5468;
    &.open {
      box-shadow: none;
    }
  }
  div.trigger {
    //border-radius: 4px;
    cursor: pointer;
    padding: 3px 0px 4px 6px;
    white-space: nowrap;
    //overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    background: #101e29;
  background: rgba(0, 150, 255, 0.1);
    border: 1px solid $blue;
    color: $blue;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    //max-width: 200px;
    transition: all 240ms ease-out;
    &:after {
      content: "";
      display: block;
      position: absolute;
      width: 0;
      height: 0;
      border: 5px solid transparent;
      border-top-color: $blue;
      top: 11px;
      right: 9px;
    }
    &.open {
//      background: #4A5368;
//      border: 1px solid #475062;
//      color: #7A8498;
      box-shadow: none;
      &:after {
        border-top-color: #7A8498;
      }
    }
  }
  ul.options {
          &::-webkit-scrollbar {
      width: 10px;
      }
      &::-webkit-scrollbar-track {
      background: black;
      //border-left: 1px solid rgba(117,115,109,0.43);
      }
      &::-webkit-scrollbar-thumb {
      background: $blue;
      }
    list-style: none;
    margin: 0;
    padding:0;
    position: absolute;
    top: 20px;
    left: 0;
    visibility: hidden;
    opacity: 0;
    z-index: 50;
    max-height: 200px;
    overflow: auto;
      background: #101e29;
 // background: rgba(0, 150, 255, 0.1);
    border: 1px solid $blue;
  border-top:none;
    //background: #62C8BF;
    //border-radius: 4px;
   // border-top: 1px solid #7DD8D2;
    //box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    width: 100%;
    transition: opacity 300ms ease-out, top 300ms ease-out,visibility 300ms ease-out;
    &.open {
      visibility: visible;
      top: 28px;
      opacity: 1;
      /* have to use a non-visibility transition to prevent this iOS issue (bug?): */
      /*http://stackoverflow.com/questions/10736478/css-animation-visibility-visible-works-on-chrome-and-safari-but-not-on-ios*/
        transition: opacity 300ms ease-out, top 300ms ease-out;
    }
    &.overflowing {
      top: auto;
      bottom: 40px;
          transition: opacity 300ms ease-out, bottom 300ms ease-out,visibility 300ms ease-out;
      &.open {
        top: auto;
        bottom: 50px;
        transition: opacity 300ms ease-out, bottom 300ms ease-out;
      }
    }
    li {
  display:block;
      padding: 4px 8px;
      color: $blue;
      cursor: pointer;
      white-space: nowrap;
           transition: all 150ms ease-out;
  
      &.selected {
        background: $blue;
        color: #b1afac;
      }
      &.hover {
        color: #b1afac;
      }
    }
  }
}

.typesort-c, .timesort-c {
  padding:0;
  margin:0;
  width:150px;
}

.timesort-c {
  width:200px;
}

.test {
  padding: 3px 0px 4px 6px;
  background:$red;
}

(function() {
  var $;

  $ = window.jQuery || window.Zepto || window.$;

  $.fn.fancySelect = function(opts) {
    var isiOS, settings;
    settings = $.extend({
      forceiOS: false
    }, opts);
    isiOS = !!navigator.userAgent.match(/iP(hone|od|ad)/i);
    return this.each(function() {
      var copyOptionsToList, disabled, options, scrollFlag, scrollTimeout, sel, trigger, updateTriggerText, wrapper;
      sel = $(this);
      if (sel.hasClass('fancified') || sel[0].tagName !== 'SELECT') {
        return;
      }
      sel.addClass('fancified');
      sel.css({
        width: 1,
        height: 1,
        display: 'block',
        position: 'absolute',
        top: 0,
        left: 0,
        opacity: 0
      });
      sel.wrap('<div class="fancy-select">');
      wrapper = sel.parent();
      if (sel.data('class')) {
        wrapper.addClass(sel.data('class'));
      }
      wrapper.append('<div class="trigger">');
      if (!(isiOS && !settings.forceiOS)) {
        wrapper.append('<ul class="options">');
      }
      trigger = wrapper.find('.trigger');
      options = wrapper.find('.options');
      disabled = sel.prop('disabled');
      if (disabled) {
        wrapper.addClass('disabled');
      }
      updateTriggerText = function() {
        return trigger.text(sel.find(':selected').text());
      };
      scrollFlag = false;
      scrollTimeout = false;
      options.on('scroll', function() {
        scrollFlag = true;
        if (scrollTimeout) {
          clearTimeout(scrollTimeout);
        }
        return scrollTimeout = setTimeout(function() {
          scrollFlag = false;
          return sel.focus();
        }, 120);
      });
      sel.on('blur', function() {
        if (trigger.hasClass('open')) {
          return setTimeout(function() {
            if (scrollFlag === false) {
              return trigger.trigger('close');
            }
          }, 333);
        }
      });
      trigger.on('close', function() {
        trigger.removeClass('open');
        return options.removeClass('open');
      });
      trigger.on('click', function() {
        var offParent, parent;
        if (!disabled) {
          trigger.toggleClass('open');
          if (isiOS && !settings.forceiOS) {
            if (trigger.hasClass('open')) {
              return sel.focus();
            }
          } else {
            if (trigger.hasClass('open')) {
              parent = trigger.parent();
              offParent = parent.offsetParent();
              if ((parent.offset().top + parent.outerHeight() + options.outerHeight() + 20) > $(window).height()) {
                options.addClass('overflowing');
              } else {
                options.removeClass('overflowing');
              }
            }
            options.toggleClass('open');
            if (!isiOS) {
              return sel.focus();
            }
          }
        }
      });
      sel.on('enable', function() {
        sel.prop('disabled', false);
        wrapper.removeClass('disabled');
        disabled = false;
        return copyOptionsToList();
      });
      sel.on('disable', function() {
        sel.prop('disabled', true);
        wrapper.addClass('disabled');
        return disabled = true;
      });
      sel.on('change', function(e) {
        if (e.originalEvent && e.originalEvent.isTrusted) {
          return e.stopPropagation();
        } else {
          return updateTriggerText();
        }
      });
      sel.on('keydown', function(e) {
        var hovered, newHovered, w;
        w = e.which;
        hovered = options.find('.hover');
        hovered.removeClass('hover');
        if (!options.hasClass('open')) {
          if (w === 13 || w === 32 || w === 38 || w === 40) {
            e.preventDefault();
            return trigger.trigger('click');
          }
        } else {
          if (w === 38) {
            e.preventDefault();
            if (hovered.length && hovered.index() > 0) {
              hovered.prev().addClass('hover');
            } else {
              options.find('li:last-child').addClass('hover');
            }
          } else if (w === 40) {
            e.preventDefault();
            if (hovered.length && hovered.index() < options.find('li').length - 1) {
              hovered.next().addClass('hover');
            } else {
              options.find('li:first-child').addClass('hover');
            }
          } else if (w === 27) {
            e.preventDefault();
            trigger.trigger('click');
          } else if (w === 13 || w === 32) {
            e.preventDefault();
            hovered.trigger('click');
          } else if (w === 9) {
            if (trigger.hasClass('open')) {
              trigger.trigger('close');
            }
          }
          newHovered = options.find('.hover');
          if (newHovered.length) {
            options.scrollTop(0);
            return options.scrollTop(newHovered.position().top - 12);
          }
        }
      });
      options.on('click', 'li', function(e) {
        sel.val($(this).data('value'));
        if (!isiOS) {
          sel.trigger('blur').trigger('focus');
        }
        options.find('.selected').removeClass('selected');
        $(e.currentTarget).addClass('selected');
        return sel.val($(this).data('value')).trigger('change').trigger('blur').trigger('focus');
      });
      options.on('mouseenter', 'li', function() {
        var hovered, nowHovered;
        nowHovered = $(this);
        hovered = options.find('.hover');
        hovered.removeClass('hover');
        return nowHovered.addClass('hover');
      });
      options.on('mouseleave', 'li', function() {
        return options.find('.hover').removeClass('hover');
      });
      copyOptionsToList = function() {
        var selOpts;
        updateTriggerText();
        if (isiOS && !settings.forceiOS) {
          return;
        }
        selOpts = sel.find('option');
        return sel.find('option').each(function(i, opt) {
          opt = $(opt);
          if (opt.val() && !opt.prop('disabled')) {
            if (opt.prop('selected')) {
              return options.append("<li data-value=\"" + (opt.val()) + "\" class=\"selected\">" + (opt.text()) + "</li>");
            } else {
              return options.append("<li data-value=\"" + (opt.val()) + "\">" + (opt.text()) + "</li>");
            }
          }
        });
      };
      sel.on('update', function() {
        wrapper.find('.options').empty();
        return copyOptionsToList();
      });
      return copyOptionsToList();
    });
  };

}).call(this);



			$(document).ready(function() {
				$('#typesort').fancySelect();
        $('#timesort').fancySelect();

			});