создание настраиваемого выпадающего меню

Question

Я пытаюсь создать раскрывающееся меню, которое будет таким же, как изображение ниже.

.

<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 do |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> 

Там есть границы изображения и Seperator изображение, которое должно быть применено к <ul> и <li> в <select> для <dropdown>.

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

Вот fiddle.

Answer 1

Вы можете попробовать следующее,

в ваших .ul-signup> li > a добавить border-bottom: 1px solid #000;

, а также добавить

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

Вот modified fiddle

И добавить границу вам просто нужно добавить границу к ul элемента.

********* UPDATED с изображением СЕПАРАТОРА *********************

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

Проверить это updated fiddle

Спасибо.

Answer 2

Во-первых, почему бы не использовать Bootstrap? http://getbootstrap.com/

Во-вторых, Если вы хотите добавить изображение внутри литий или уль вы можете сделать это несколькими способами, один из которых является

<li> 
    <img src="path/to/image"></img> 
<li> 

Другой способ сделать это в CSS оных фон <li> и дающий ему смещение.

Answer 3

Вы можете сделать это с границы нижней и границы цвета

Изменить уль-SIGNUP> LI> а в

.UL-Signup> li> а {

display: block; 
    background-position: 10px bottom; 
    background-image: url("http://i.imgur.com/OdpE6ba.png"); 
    border-bottom: 1px solid; 
    border-color:#C8C8C8; 
    font-weight: normal; 
    line-height: 1.42857143; 
    color: black; 
    white-space: nowrap; 
} 

вот скрипка http://jsfiddle.net/qh1cuonh/2/

Answer 4

Пожалуйста, удалите

background-position: 10px bottom; 
    background-image: url("http://i.imgur.com/OdpE6ba.png"); 

от этого селектора CSS .ul-signup> li > a, я заменил ур границы изображения в селекторе CSS .dd-li, потому что не так много видно

обновленный fiddle