效果图:
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>