创建自定义下拉菜单
我想创建一个下拉菜单,它与下面的图像相同。创建自定义下拉菜单
。
<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。
你可以尝试以下方法,
在.ul-signup> li > a
添加border-bottom: 1px solid #000;
,并添加
#dropdownMenu1 {
border: 1px solid #000;
}
,并增加你只需要边框添加到ul
元素的边界。
********* 更新了与影像分离 *********************
我使用的随机线图像来自谷歌,因为你的形象对我来说太白了。
谢谢。
我想使用一个图像,而不是那个分离器@苏曼 – Suraj
好吧,让我再次检查它@Suraj –
嗨,现在检查更新小提琴。这次使用的图像作为分隔符。您的图片对我来说太白了,所以我使用了谷歌的随机图片。但是你应该能够改变图像来使用你自己的图像。 @Suraj –
首先,为什么不使用Bootstrap? http://getbootstrap.com/
其次, 如果你想在图像中添加锂内或UL,你可以在一对夫妇的方式做到这一点,其中之一是
<li>
<img src="path/to/image"></img>
<li>
做到这一点的另一种方法是在CSS加给<li>
的背景并给它一个偏移量。
你可以用下边框和边框颜色
更改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/
请问有什么意义这个的?为什么不用HTML元素'select'和'option'来创建它? – cezar
这是写这种方式,我需要得到的下拉列表固定,因此我不想花很多时间,并最终失去了很多时间只是改变CSS在这里和那里。 – Suraj