CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Suraj
Suraj

Reputation: 2563

creating customized dropdown menu

I am trying to create a dropdown menu which is same as the image below.

.enter image description here

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

Upvotes: 1

Views: 92

Answers (4)

Suman Barick
Suman Barick

Reputation: 3411

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.

Upvotes: 2

Mahendran
Mahendran

Reputation: 486

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

Upvotes: 0

Rachel Gallen
Rachel Gallen

Reputation: 28583

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/

Upvotes: 1

Jean-Paul
Jean-Paul

Reputation: 379

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.

Upvotes: 0

Related Questions