效果图：

css:

样式类型='text/css' /*带复选框的下拉框*/ul Li {列表式：无；padd :0 pxmargin : 0 px }。选择_ checkBox { border:0px纯红；相对位置：显示：内嵌块；} .chartQuota { height :23 pxfloat : leftdisplay : inline-block；边界：0px纯黑；相对位置：} .图表选项流程趋势{ z-index :300背景-颜色：白色；border:1px纯灰色；display:none绝对位置：left:0pxtop:23px宽度宽度：150px}。图表选项流程趋势ul { float : leftpadding: 0pxmargin: 5px }。图表选项流程趋势李{/*向左浮动：*/显示：块；相对位置：left :0 pxmargin : 0pxclear : both }。图表选项流程趋势李* {左浮：} a :-web kit-any-link { color :-web kit-link；文本修饰：下划线；cursor: auto}。图表配额p a { float : left height : 21 pxoutline : 0无；border: 1px固体# ccc线高： 22pxpadding: 0 5px飞越：隐藏；背景# eaeaeacolor: # 313131文本装饰：无；} .图表配额p { margin:0px叶酸向左：飞越：隐藏；高度： 23px线高：24 px显示器：内联块；} .图表选项流程趋势p { height : 23 px线高： 23px飞越：隐藏；相对位置：z-index : 2；背景： # fefbf 7 padding-top : 0px；显示器：内联块；} .图表选项流程趋势p a {边框3360 1px实心# fff左边距left : 15pxcolor : # 2e 91da }/style html:

div class=' select _ CheckBox ' div class=' ChartQuanta ' p a href=' JavaScript :'hidefocus='true' title='请选择指标跨度选择指标/span/a/p/div br div class=' ChartOptionsFlowTrend ' ' ul Li class=' input type=' checkbox '值=' 1 ' span浏览次数(PV)/span /li li class='输入类型='复选框'值='1 '跨度独立访客（紫外线)/span /li li class='输入类型='复选框'值='1'span/span/Li Li class='输入类型='复选框'值=' 1 '跨度新独立访客/span /li li class='输入类型='复选框'值='1 '跨度访问次数/span/Li/ul p a href=' JavaScript :标题='确定hidefocus='true' class='a_0 '确定/aa href=' JavaScript :标题='取消hidefocus='true' class='a_1 '取消/a /p /div /divjs:

脚本类型=' text/JavaScript ' $(function(){ $(').选择_ CheckBox’).悬停(函数(){ $(').图表选项流程趋势').css('display '，' inline-block ')；}，function(){ $(' .图表选项流程趋势').css('display '，' none ')；});});/script