<div class="dropdown-checkbox form-group">
<label class="label-title">Dropdown</label>
<ul>
<li><label><input type="checkbox" name="type[]">A</label></li>
<li><label><input type="checkbox" name="type[]">B</label></li>
<li><label><input type="checkbox" name="type[]">C</label></li>
</ul>
</div>
.dropdown-checkbox{
position:relative;
display:inline-block
}
.dropdown-checkbox .label-title{
font-size:13px;
}
.dropdown-checkbox ul{
position: absolute;
background: #cacaca;
list-style: none;
min-width: 180px;
margin: 0px;
padding:0px;
left:0px;
display:none;
z-index:1;
border: 1px solid #9c9c9c;
}
.dropdown-checkbox ul li{
font-size: 15px;
padding: 10px;
border-bottom: 1px solid #a5a5a5;
margin: 0px;
}
.dropdown-checkbox ul li input{
margin-right:10px;
}
.dropdown-checkbox:hover ul{
display:block
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.