创建自定义下拉菜单

我想创建一个下拉菜单，它与下面的图像相同。创建自定义下拉菜单

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

有一个边界图像，并且需要被应用到<ul>和<select>为<dropdown>的<li>一个分隔符图像。

我无法追查到这个问题。可能完全与阶级和财产的数量相混淆。有人可以帮我追捕这个问题吗？

这是fiddle。

来源

2015-07-21 Suraj

请问有什么意义这个的？为什么不用HTML元素'select'和'option'来创建它？ – cezar

这是写这种方式，我需要得到的下拉列表固定，因此我不想花很多时间，并最终失去了很多时间只是改变CSS在这里和那里。 – Suraj

你可以尝试以下方法，

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

，并添加

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

这里是modified fiddle

，并增加你只需要边框添加到ul元素的边界。

********* 更新了与影像分离 *********************

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

入住这updated fiddle

谢谢。

来源

2015-07-21 07:13:14

我想使用一个图像，而不是那个分离器@苏曼 – Suraj

好吧，让我再次检查它@Suraj –

嗨，现在检查更新小提琴。这次使用的图像作为分隔符。您的图片对我来说太白了，所以我使用了谷歌的随机图片。但是你应该能够改变图像来使用你自己的图像。 @Suraj –

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

其次，如果你想在图像中添加锂内或UL，你可以在一对夫妇的方式做到这一点，其中之一是

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

做到这一点的另一种方法是在CSS加给<li>的背景并给它一个偏移量。

来源

2015-07-21 07:06:01

你可以用下边框和边框颜色

更改UL-注册> li> a到

.UL-注册> 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/

来源

2015-07-21 07:08:20

嘿蕾切尔，谢谢，而不是那个边界我想使用该图像作为分隔符，而不是那条线 – Suraj

@Suraj当我在我的浏览器中输入该网址时什么也没有显示 –

是的，因为它是白色的。检查元素并在浏览器中将身体颜色更改为黑色，您将能够看到颜色白色的分隔符 – Suraj

请从这个CSS选择.ul-signup> li > a删除

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

，我已经取代了CSS选择.dd-li乌尔边界图像，因为它没有那么多可见

更新fiddle

来源

2015-07-21 07:29:37 Mahendran

选择不会在你的小提琴中发生 – Suraj

选择不会在你的小提琴本身发生的权利？你能澄清'我边框图像没有显示或选择'没有发生你发布这个问题？ – Mahendran

我该如何解决这个问题。 – Suraj

创建自定义下拉菜单

回答

相关问题