javascript - creating customized dropdown menu -

i trying create dropdown menu same image below.

.

 <div class="dropdown dropdown-select signup-dd">    <button class="btn btn-default dropdown-toggle signup-btn"  type="button" id="dropdownmenu1" data-toggle="dropdown" aria- expanded="true">     select title      <span class="caret downarrow-signup"></span>    </button>    <ul class="dropdown-menu ul-signup" role="menu" aria-labelledby="dropdownmenu1">       <%# @themes.each |t| %>        <li role="presentation" class="dd-li">        <a role="menuitem" tabindex="-1" href="javascript:void(0);" onclick="$('#dropdownmenu122').text('mr.');$('#user_title').val('<%="mr."%>');" ><%="mr."%></a></li>        <li role="presentation" class="dd-li" >        <a role="menuitem" tabindex="-1" href="javascript:void(0);" onclick="$('#dropdownmenu122').text('ms.');$('#user_title').val('<%="ms."%>');"><%="ms."%></a></li>         <li role="presentation" class="dd-li">         <a role="menuitem" tabindex="-1" href="javascript:void(0);" onclick="$('#dropdownmenu122').text('mrs.');$('#user_title').val('<%="mrs."%>');"><%="mrs."%></a></li>     <%# end %>      </ul>   </div> 

there's border image , seperator image needs applied <ul> , <li> of <select> <dropdown>.

i not able trace down issue. confused number of classes , property. can me hunt down issue.

here's fiddle.

you can try following,

in .ul-signup> li > a add border-bottom: 1px solid #000;

and add

#dropdownmenu1 {     border: 1px solid #000; } 

here modified fiddle

and add border need add border ul element.

********* updated image separator *********************

i used random line image google because image appeared whitey me.

check updated fiddle

thank you.