test b drp dwn

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="bootstrap-toggle.min.js"></script>
<link rel="stylesheet" href="bootstrap-toggle.min.css">
<link rel="stylesheet" href="bootstrap-theme.min.css">
  
<style>
    body {
  padding: 15px;
}
/* each line in dropdown */
.checkbox-menu li label {
    display: block;
    padding: 8px 8px;
    font-weight: normal;
    color: #333;
}
/* .checkbox-menu li input {
    margin: 0px 0px;
    top: 0px;
    position: relative;
} */

/* .checkbox-menu li.active label {
    background-color: yellow;
    font-weight:1;
} */

/* hover on each line in dropdown */
.checkbox-menu li:hover,
.checkbox-menu li:focus {
    background-color: #b6f7fb;
}

/* .checkbox-menu li.active label:hover,
.checkbox-menu li.active label:focus {
    background-color: yellow;
} */

.btn-danger {
        color: #333;
        background-color: indianred;
        border-color: #d43f3a;
}
.btn-primary:active:hover, .btn-primary.active:hover, .open > .dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open > .dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus{
    color: #333;
    background-color: #d4d4d4;
    border-color: #8c8c8c;
  }  
.btn:hover,.btn:focus, .btn:active{
/*     background-color: #b8b8ff; */
    border-color: #d43f3a;
  } 
.btn {
    display: inline-block;
    padding: 2px 10px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: -3.428571444;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
   }
  
.toggle-on.btn-sm:hover {    
    background-color: #d4d4d4; 
    border-color: #d43f3a;
  }
.toggle-off.btn-sm:hover {    
    background-color: #d4d4d4; 
    border-color: #d43f3a;
  }  
.toggle-on.btn-sm {
    padding-right: 20px;
    color: #333;
    font-weight: 600;
    background-color: indianred; 
    /*border-width: 1px;  
    border-color: #d43f3a;
    /*width: 12px;*/
  }
.toggle-handle.btn.btn-default.btn-sm{
    background-color: brown;
  }

.toggle.btn-sm{
  min-width: 50px;
  min-height: 30px;
  border-color: #d43f3a;
  border: #d43f3a;
  border-width: 5px;
}  
  
  </style>
</head>

<body>
  
  <div class="dropdown">
  <button class="btn btn-danger dropdown-toggle" type="button"id="dropdownMenu1" data-toggle="dropdown" 
          aria-haspopup="true" aria-expanded="true" style="height :34px; width:178px;   border-color: #d43f3a;  border-width: 3px;outline-color: transparent;"> Zooming Options <i class="glyphicon glyphicon-cog"></i>
          <span class="caret"></span>
  </button>
    
  <ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu1" style="min-width:100px ; text-align:center;">  
    <li >
      <label class="control-label" id="z1" style="display: inline-block; font-size:13px; margin-left: 0px; font-weight: 700;"> Normal Zoom:
        <input id="zooming" class="checkbox checkbox-danger"  type="checkbox" unchecked data-toggle="toggle" data-size="small" style= "border-color: #d43f3a;  border-width: 5px;" >
      </label>
    </li>
    
    <li >
       <label class="control-label" id="z2" style="display: inline-block;font-size:13px; margin-left: 0px; font-weight: 700;"> Semantic Zoom:
    <input id="zooming2" class="checkbox checkbox-danger"  type="checkbox" unchecked data-toggle="toggle" data-size="small" style= "border-color: #d43f3a;  border-width: 5px;" >
        </label>
    </li>
    
    <li >
      <label class="control-label" id="z3" style="display: inline-block;font-size:13px; margin-left: 0px; font-weight: 700;"> Column Zoom:
      <input id="zooming3" class="checkbox checkbox-danger"  type="checkbox" unchecked data-toggle="toggle" data-size="small" style= "border-color: #d43f3a;  border-width: 5px;" >
       </label>
    </li>
    
  </ul>
</div>
  
  
  <script>
    // Feel free to change or delete any of the code you see in this editor!
// 	$(".checkbox-menu").on("change", "input[type='checkbox']", function() {
//    $(this).closest("li").toggleClass("active", this.checked);
// });

$(document).on('click', '.allow-focus', function (e) {
  e.stopPropagation();
});

</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js