Выберите выпадающие элементы не отображается

Question

Мне нужна помощь с моим кодом.У меня проблема с выбором пункта в опциях выбора.Я использую опции выбора dropkick, и когда я пытаюсь щелкнуть на кнопке со стрелкой вниз выбора вариантов, он не будет выпадающий элемент.Что-то не так с кодом.

Когда я пытаюсь это сделать:

<form class="list-dropdown" action="" method="post" name="listSelect">

    <input type="hidden" name="data[landing_page]" value="/broadcasts">
    <div class="dk-select " id="dk0-datalistactivate"><div class="dk-selected " tabindex="0" id="dk0-combobox" aria-live="assertive" aria-owns="dk0-listbox" role="combobox">dubc_traffic</div><ul class="dk-select-options" id="dk0-listbox" role="listbox" aria-expanded="false"><li class="dk-option  dk-option-selected" data-value="" text="dubc_traffic" role="option" aria-selected="true" id="dk0-listSelectionActiveOption">dubc_traffic</li></ul></div><select name="data[List][activate]" id="datalistactivate" data-dkcacheid="0">

<option selected="selected" id="listSelectionActiveOption" value="">dubc_traffic</option>

<option selected="selected" id="listSelectionActiveOption" value="">dubc_traffic 2</option>
loading lists …

    </select>
    <div class="clear"></div>
</form>

Это не будет работать, но когда я попробую это, оно будет работать:

<select class="dk-select select-options select-options" id="dk0-datalistactivate">
    <option>dubc_traffic ass</option>
</select>

Вот код:

<style type="text/css">

.lists-dropdown {
    color: #343434;
    float: left;
    display: none;
    font-size: 13px;
    height: 35px;
    line-height: 12px;
    margin-right: 10px;
    padding-top: 20px;
    position: relative;
}

.lists-dropdown label {
    color: white;
    font-size: 13px;
    font-weight: 600;
    padding: 8px;
    display: inline-block;
    vertical-align: top;
}

.lists-dropdown form {
    left: 5px;
    display: inline-block;
}



.topnav .dk-select, .topnav .dk-select-options {
    width: 180px;
}

.dk-select, .dk-select-multi {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    line-height: 2em;
    cursor: pointer;
}
.dk-select, .dk-select *, .dk-select *:before, .dk-select *:after, .dk-select-multi, .dk-select-multi *, .dk-select-multi *:before, .dk-select-multi *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.topnav .dk-selected {
    height: auto;
}
.dk-selected {
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    background-color: white;
    border-radius: 4px;
    border: 1px solid #ababab;
    overflow: hidden;
    padding: 0 2em 0 .5em;
    position: relative;
    white-space: nowrap;
}
.dk-select, .dk-select *, .dk-select *:before, .dk-select *:after, .dk-select-multi, .dk-select-multi *, .dk-select-multi *:before, .dk-select-multi *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.dk-selected:before {
    top: 50%;
    border: solid transparent;
    border-width: .25em .25em 0;
    border-top-color: #ababab;
    margin: -0.125em .5em 0 0;
}

.dk-selected:before, .dk-selected:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
}

.dk-selected:after {
    top: 0;
    height: 100%;
    border-left: 1px solid #ababab;
    margin: 0 1.5em 0 0;
}

.dk-selected:before, .dk-selected:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
}

.dk-select .dk-select-options {
    position: absolute;
    display: none;
    left: 0;
}
.topnav .dk-select, .topnav .dk-select-options {
    width: 180px;
}
.dk-select-options {
    background-color: white;
    border-radius: 4px;
    border: 1px solid #ababab;
    list-style: none;
    margin: 0;
    max-height: 18.5em;
    overflow-y: auto;
    padding: 0;
    z-index: 1000;
}

.dk-option {
    line-height: 1.5;
    padding: 6px 8px;
    word-wrap: break-word;
}

.dk-option-selected {
    background-color: #00adef;
    color: #fff;
}

select[data-dkcacheid] {
    display: none;
}

.lists-dropdown select {
    font-size: 16px;
}
form .searchinputbox, form .searchbox, form select {
    background-color: #fff;
    border: 1px solid #dbdcde;
    color: #505e67;
    height: 30px;
}

form .searchinputbox option, form .searchbox option, form select option {
    color: #505e67;
}

user agent stylesheet
option {
    font-weight: normal;
    display: block;
    white-space: pre;
    min-height: 1.2em;
    padding: 0px 2px 1px;
}
</style>

<form class="list-dropdown" action="" method="post" name="listSelect">

    <input type="hidden" name="data[landing_page]" value="/broadcasts">
    <div class="dk-select " id="dk0-datalistactivate"><div class="dk-selected " tabindex="0" id="dk0-combobox" aria-live="assertive" aria-owns="dk0-listbox" role="combobox">dubc_traffic</div><ul class="dk-select-options" id="dk0-listbox" role="listbox" aria-expanded="false"><li class="dk-option  dk-option-selected" data-value="" text="dubc_traffic" role="option" aria-selected="true" id="dk0-listSelectionActiveOption">dubc_traffic</li></ul></div><select name="data[List][activate]" id="datalistactivate" data-dkcacheid="0">

<option selected="selected" id="listSelectionActiveOption" value="">dubc_traffic</option>

<option selected="selected" id="listSelectionActiveOption" value="">dubc_traffic 2</option>
loading lists …

    </select>
    <div class="clear"></div>
    <input type="hidden" name="sess_token" value="388289602566325fdeb6bce2a708c6d46ca2ac1c">
</form>

Jsfiddle: http://jsfiddle.net/rynawLx2/

Я понимаю, что я не добавил более одного элемента, но он не будет отображать элементы при нажатии на него,Я хочу использовать второй вариант выбора ниже первого в этой ссылке, потому что мне нравится обложка, которая идет рядом со стрелкой вниз.

Не могли бы вы помочь мне, как заставить выбранные опции работать с выпадающими элементами, когда я нажимаю на элементы или стрелки вниз?

Я хочу добавить более одного элемента, используя этовыберите параметры.

Спасибо.