<#-- 标题 -->

下拉列表：

下拉列表是设计出当移入或点击时下拉出一个列表的样式。下拉列表当前支持点击和移入触发下拉列表一层界面，支持列表颜色、激活颜色，指定下拉列表宽度和多列等样式。

<#-- 一、点击单列效果 -->

一、点击单列效果

<#-- 二、点击多列效果（含颜色） -->

二、点击多列效果（两列、颜色边框背景）

<#var colorMap = Jsons.toMapSS(context.getResourceString("/document/tutorial/ui/css/zhiqim.pre.json", "UTF-8"))/>

1、定义一个div，指定为下拉列表[data-role="z-dropdown"]，包含样式类[class="z-dropdown"]，指定点击触发[data-options="event:click;"]和宽度[width:160px]
2、指定点击内容[span]，和右对齐箭头[<i class="z-float-right z-font z-arrowhead-down"></i>]
3、在div上指定选择的颜色[class="z-dropdown z-red"]表示显示红色边框、红色背景和红色选中信息 4、指定多列设计，如两列，总宽度[width:320px]，每列宽度[item-width:159px]，注意预留1像素的边框 5、当有更变时，可用事件data-onchange。

<#-- 三、移入移出菜单下拉列表 -->

三、移入移出菜单下拉列表

1、定义一个div，指定为下拉列表[data-role="z-dropdown"]，包含样式类[class="z-dropdown"]，指定移入触发[data-options="event:hover;"]和宽度[width:160px]
2、指定点击内容[span]，和右对齐箭头[<i class="z-float-right z-font z-arrowhead-down"></i>]
3、多个下拉列表在一起组成一组时，注意中间有inline-block产生的间隙，可利用zi-mg-l-3 zi-mg-r-3来去除，或保持div相连用zi-mg-l-1去除。

${zhiqim_com_chapter()}