创建自定义下拉菜单

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>

有一个边框图片和一个分隔符图片需要应用于<ul> <li>的{​​{1}}和<select>。

我无法追查这个问题。可能与类和属性的数量完全混淆。有人可以帮我解决这个问题。

这是fiddle。

Answer 1

您可以尝试以下方法，

在.ul-signup> li > a添加border-bottom: 1px solid #000;

中

并添加

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

以下是modified fiddle

要添加边框，您只需要为ul元素添加边框。

********* 更新图像分隔符 *********************

我使用谷歌的随机线图像，因为你的图像对我来说太白了。

选中此updated fiddle

谢谢。

Answer 2

您可以使用border-bottom和border-color

执行此操作

将您的ul-signup＆gt; li＆gt; a更改为

.UL-注册＆GT; li>一个{

anything-goes-formatter

这是一个小提琴http://jsfiddle.net/qh1cuonh/2/

Answer 3

首先，为什么不使用Bootstrap？ http://getbootstrap.com/

其次， 如果你想在li或ul中添加图像，你可以通过几种方式添加图像，其中一种是

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

另一种实现此目的的方法是在css中为<li>添加背景并为其赋予偏移量。

Answer 4

请删除

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

来自这个css选择器.ul-signup> li > a，我已经在css选择器.dd-li中替换了你的边框图片，因为它没那么多可见

更新fiddle