<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
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.