创建自定义下拉菜单

Question

I am trying to create a dropdown menu which is same as the 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 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>

There's a border image and a seperator image which needs to be applied to the <ul> and <li> of the <select> for <dropdown> .

I am not able to trace down the issue. Probably completely confused with the number of classes and the property. Can someone help me hunt down the issue.

Here's the fiddle .

Answer 1

You can try the following,

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

and also add

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

Here is the modified fiddle

And to add the border you just need to add border to the ul element.

********* UPDATED WITH IMAGE SEPARATOR *********************

I used a random line image from google because your image appeared too whitey to me.

Check this updated fiddle

Thank you.

Answer 2

You can do this with border-bottom and border-color

Change your ul-signup>li>a to

.ul-signup> li > a {

 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;
}

here is a fiddle http://jsfiddle.net/qh1cuonh/2/

Answer 3

First off, why not use Bootstrap? http://getbootstrap.com/

Second, If you want to add in image inside a li or ul you can do this in a couple of ways, one of which is

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

Another way to accomplish this is in css add a background to the <li> and giving it an offset.

Answer 4

Please remove

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

from this css selector .ul-signup> li > a , i have replaced ur border image in css selector .dd-li because it not that much visible

updated fiddle