效果图：
CSS：
<style type = "text/css">/ *带复选框的下拉框 */ul li {list-style：none;パディング：0px;マージン：0px; } .select_checkbox {border：0px solid red;位置：相対;ディスプレイ：インラインブロック。 } .chartquota {height：23px;フロート：左;ディスプレイ：インラインブロック。ボーダー：0pxソリッドブラック。位置：相対; } .chartoptionsflowtrend {z-index：300;背景色：白。ボーダー：1pxソリッドグレー;表示：なし;位置：絶対;左：0px;トップ：23px;幅：150px; } .chartoptionsflowtrend ul {float：left;パディング：0px;マージン：5px; } .chartoptionsflowtrend li { /* float：left; */ display：block;位置：相対;左：0px;マージン：0px;クリア：両方; } .chartoptionsflowtrend li *{float：left; } a：-webkit-any-link {color：-webkit-link;テキスト装置：下線;カーソル：自動; } .chartquota pa {float：left;高さ：21px;アウトライン：0なし;ボーダー：1pxソリッド#ccc;ラインハイト：22px;パディング：0 5px;オーバーフロー：隠し;背景：#eaeaea;色：＃313131;テキスト装置：なし; } .chartquota p {margin：0px; folat：左;オーバーフロー：隠し;高さ：23px;ラインハイト：24px;ディスプレイ：インラインブロック。 } .chartoptionsflowtrend p {height：23px;ラインハイト：23px;オーバーフロー：隠し;位置：相対; z-index：2;背景：＃fefbf7;パディングトップ：0px;ディスプレイ：インラインブロック。 } .chartoptionsflowtrend pa {border：1px solid #fff;マージン左：15px;色：＃2e91da; } </style>HTML：
<div> <div> <p> <a href = "javascript :;" Hidefocus = "true"> <span>选择指标</span> <b> </b> </a> </p> </div> <br> <div "> <ul> <li> <入力タイプ="チェックボックス "値=" 1 "> <span> pv <li> <入力タイプ= "チェックボックス"値 "値=" 1 "> <span> ip </span> </li> <li> <入力タイプ="チェックボックス "値" 1 "> <span>新独立访客</span> </li> <li> <入力タイプ="チェックボックス "値=" 1 "> <span> </span </li> </ul> <p> <p> <a href = hidefocus = "true">确定</a> <a href = "javascript :;
JS：
<script type = "text/javascript"> $（function（）{$（ "。select_checkbox"）。hover（function（）{$（ "。chartoptionsflowtrend"）。css（ "display"、 "inline-block"）;}、function（ "$（" "） </script>