<style type="text/css">
.wrapper-dropdown {
        /* размер и положение */
        position: relative; /* Enable absolute positioning for children and pseudo elements */
        width: 200px;
        padding: 10px;
        margin: 0 auto;
         
        /* цвет и фон */
        background: #9bc7de;
        color: #fff;
        outline: none;
        cursor: pointer;
         
        /* шрифт */
        font-weight: bold;
}
.wrapper-dropdown:after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        right: 16px;
        top: 50%;
        margin-top: -6px;
        border-width: 6px 0 6px 6px;
        border-style: solid;
        border-color: transparent #fff;      
}
.wrapper-dropdown-1 .dropdown {
        /* Size & position */
        position: absolute;
        top: 100%;
        left: 0; /* Size */
        right: 0; /* Size */
         
        /* Styles */
        background: #fff;
        font-weight: normal; /* Overwrites previous font-weight: bold; */
         
        /* Hiding */
        opacity: 0;
        pointer-events: none;
}
.wrapper-dropdown-1 .dropdown li a {
        display: block;
        text-decoration: none;
        color: #9e9e9e;
        padding: 10px 20px;
}
/* Hover state */
.wrapper-dropdown-1 .dropdown li:hover a {
        background: #f3f8f8;
}
/* Active state */
.wrapper-dropdown-1.active .dropdown {
        opacity: 1;
        pointer-events: auto;
}
.wrapper-dropdown-1.active:after {
        border-color: #9bc7de transparent;
        border-width: 6px 6px 0 6px ;
        margin-top: -3px;
}
.wrapper-dropdown-1.active {
      background: #9bc7de;
      background: linear-gradient(to right, #9bc7de 0%, #9bc7de 78%, #ffffff 78%, #ffffff 100%);
}
</style>

<div id="dd" class="wrapper-dropdown-1" tabindex="1">
        <span>Пол</span>
        <ul class="dropdown">
            <li><a href="#">Мужской</a></li>
            <li><a href="#">Женский</a></li>
        </ul>
</div>

<script type="text/javascript">
function DropDown(el) {
        this.dd = el;
        this.placeholder = this.dd.children('span');
        this.opts = this.dd.find('ul.dropdown > li');
        this.val = '';
        this.index = -1;
        this.initEvents();
}
DropDown.prototype = {
        initEvents : function() {
            var obj = this;
         
            obj.dd.on('click', function(event){
                $(this).toggleClass('active');
                return false;
            };);
         
            obj.opts.on('click',function(){
                var opt = $(this);
                obj.val = opt.text();
                obj.index = opt.index();
                obj.placeholder.text('Gender: ' + obj.val);
            };);
        },
        getValue : function() {
            return this.val;
        },
        getIndex : function() {
            return this.index;
        }
}
</script>

<style type="text/css">
.wrapper-dropdown-2 {
       /* Size and position */
       position: relative; /* Enable absolute positioning for children and pseudo elements */
       width: 200px;
       margin: 0 auto;
       padding: 10px 15px;
       /* Styles */
       background: #fff;
       border-left: 5px solid grey;
       cursor: pointer;
       outline: none;
}
.wrapper-dropdown-2:after {
       content: "";
       width: 0;
       height: 0;
       position: absolute;
       right: 16px;
       top: 50%;
       margin-top: -3px;
       border-width: 6px 6px 0 6px;
       border-style: solid;
       border-color: grey transparent;
}
.wrapper-dropdown-2 .dropdown {
     /* Size & position */
       position: absolute;
       top: 100%;
       left: -5px;
       right: 0px;
       /* Styles */
       background: white;
       transition: all 0.3s ease-out;
       list-style: none;
       /* Hiding */
       opacity: 0;
       pointer-events: none;
}
.wrapper-dropdown-2 .dropdown li a {
       display: block;
       text-decoration: none;
       color: #333;
       border-left: 5px solid;
       padding: 10px;
       transition: all 0.3s ease-out;
}
.wrapper-dropdown-2 .dropdown li:nth-child(1) a {
       border-left-color: #00ACED;
}
.wrapper-dropdown-2 .dropdown li:nth-child(2) a {
       border-left-color: #4183C4;
}
.wrapper-dropdown-2 .dropdown li:nth-child(3) a {
       border-left-color: #3B5998;
}
.wrapper-dropdown-2 .dropdown li i {
       margin-right: 5px;
       color: inherit;
       vertical-align: middle;
}
/* Hover state */
.wrapper-dropdown-2 .dropdown li:hover a {
       color: grey;
}
.wrapper-dropdown-2.active:after {
       border-width: 0 6px 6px 6px;
}
.wrapper-dropdown-2.active .dropdown {
       opacity: 1;
       pointer-events: auto;
}
</style>

<div id="dd" class="wrapper-dropdown-2">Регистрация
       <ul class="dropdown">
           <li><a href="#"><i class="icon-twitter icon-large"></i>Twitter</a></li>
           <li><a href="#"><i class="icon-github icon-large"></i>Github</a></li>
           <li><a href="#"><i class="icon-facebook icon-large"></i>Facebook</a></li>
       </ul>
</div>

<script type="text/javascript">
function DropDown(el) {
       this.dd = el;
       this.initEvents();
}
DropDown.prototype = {
       initEvents : function() {
           var obj = this;
       
           obj.dd.on('click', function(event){
               $(this).toggleClass('active');
               event.stopPropagation();
           };);
       }
}
</script>