creating customized dropdown menu

Question

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.

May I ask what's the point of this? Why wouldn't one take the HTML elements select and option for creating this? — cezar
– cezar, Commented Jul 21, 2015 at 7:02
this was been written this way and I need to get the dropdown fixed and hence I didn't want to put lot of time and eventually have lost a lot of time just changing the css here and there. — Suraj
– Suraj, Commented Jul 21, 2015 at 7:07

Suman Barick · Accepted Answer · 2015-07-21 07:50:25Z

2

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.

edited Jul 21, 2015 at 7:50

answered Jul 21, 2015 at 7:13

Suman Barick

3,4112 gold badges22 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Suman Barick Over a year ago

Ok, just let me check it once again @Suraj

Suman Barick Over a year ago

Hi, check the updated fiddle now. Used image as separator this time. Your image appeared too whitey to me so I used a random image from google. But you should be able to change the image to use your own one. @Suraj

Suman Barick Over a year ago

Just a quick update. The image reference I used from google has changed. So, image position that I used -276px needs to be corrected to -75px for the example to work.. :)

Suman Barick Over a year ago

an u[pdated fiddle in support of my prev comment jsfiddle.net/qh1cuonh/18

Rachel Gallen · Accepted Answer · 2015-07-21 07:08:20Z

1

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/

answered Jul 21, 2015 at 7:08

Rachel Gallen

28.7k22 gold badges77 silver badges87 bronze badges

5 Comments

Suraj Over a year ago

hey Rachel, Thanks but instead of that border I want to use that image as a seperator and not that line

Rachel Gallen Over a year ago

@Suraj when i enter that url in my browser nothing shows up

Suraj Over a year ago

Yes, because it is white in color. Inspect element and change the body color to black in the browser, you'll be able to see the seperator of color white

Rachel Gallen Over a year ago

@Suraj then i don't understand the problem

Suraj Over a year ago

No problem Rachel, Thanks for your time

Jean-Paul · Accepted Answer · 2015-07-21 07:06:01Z

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.

Mahendran · Accepted Answer · 2015-07-21 07:40:27Z

0

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

edited Jul 21, 2015 at 7:40

answered Jul 21, 2015 at 7:29

Mahendran

4968 silver badges20 bronze badges

2 Comments

Suraj Over a year ago

the selection is not occuring in your fiddle

Mahendran Over a year ago

selection is not happening in your fiddle itself right?. can you clarify me border image is not showing or selection not happening for which you have posted this question?

Collectives™ on Stack Overflow

creating customized dropdown menu

4 Answers 4

4 Comments

5 Comments

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

5 Comments

Comments

2 Comments

Related