MultiSelect Widget - Divided into groups

HTML

<link rel="stylesheet" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/jquery.multiselect.css">
<link rel="stylesheet" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/assets/style.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/src/jquery.multiselect.js"></script>
<div>
    <select multiple="multiple" class="multiselect">
        <option value="option1">option1</option>
        <option value="option2">option2</option>
        <option value="option3">option3</option>
    </select>
    <select style="width:70px">
        <option value="Null">Select</option>
        <option value="option1">option1</option>
        <option value="option2">option2</option>
        <option value="option3">option3</option>
    </select>
</div>
<div style="margin-top: 90px">
    <div id="dropdown_box1" class="dropdown_box" style="width:12.8em;"><span>1st Priority</span>

    </div>
    <div class="dropdown_container" id="dropdown_container1">
        <ul id="select1">
            <li><a href="#"><label><input type="radio" name="first_dislike" value="Option1" class="cbx"/><span>Option 1</span></label></a>

            </li>
            <li><a href="#"><label><input type="radio" name="first_dislike" value="Option2" class="cbx"/><span>Option 2</span></label></a>

            </li>
            <li><a href="#"><label><input type="radio" name="first_dislike" value="Option3" class="cbx"/><span>Option 3</span></label></a>

            </li>
        </ul>
    </div>
</div>

CSS

.dropdown_box {
    background:#ffffff url(images/arrow1.png) no-repeat scroll 97.5% center;
    cursor:pointer;
    display:block;
    font: 7.5pt Verdana, Arial, sans-serif;
    color: #555555;
    vertical-align: middle;
    border: 1px solid #d3d3d3;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    line-height: 24px;
    margin:0px;
    padding:0px 11px 0px 4px;
    z-index: 15000;
    white-space:nowrap;
}
/* Should be apx. 1.5em wider than Dropkick Select elements */
 .dropdown_container {
    position:relative;
    z-index: 15000;
}
.dropdown_container a {
    font: 7.5pt Verdana, Arial, sans-serif;
    color:#555555;
    text-decoration:none;
}
.dropdown_container a:hover {
    color:#212121;
    font-weight:bold;
}
.dropdown_container ul {
    display:none;
    position:absolute;
    top:0px;
    left:0px;
    list-style:none;
    border:1px solid #d3d3d3;
    color:#555555;
    width:13.35em;
    margin:0px;
    padding:0px;
}
.dropdown_container ul li ul {
    display:none;
    position:absolute;
    top:0px;
    left:0px;
    list-style:none;
    border:1px solid #d3d3d3;
    color:#555555;
    background:#ffffff none repeat scroll 0 0;
    width:auto;
    margin:0px;
    padding:0px 0px;
}
.cbx {
    visibility:hidden;
    display:none;
}
:checked + span {
    color:#212121;
    font-weight: bold;
}

JavaScript

$(function () {
    $(".multiselect").multiselect({
        header: false,
        height: 'auto',
    });
      $(".multiselect").mouseout(function () {
         alert("sss");
        $("#select1").hide();
    });
});

$(document).ready(function () {
    $("#dropdown_box1").click(function () {
        $("#select1").show();
    });
    var timeoutID;
    $("#select1").mouseleave(function () {
        timeoutID = setTimeout(function () {
            $("#select1").hide();
        }, 800);
    });
     $("#select1").mouseout(function () {
         alert("sss");
        $("#select1").hide();
    });
    $("#select1").mouseenter(function () {
        clearTimeout(timeoutID);
    });
});
$('html').click(function (e) {
    if (e.target.id == 'dropdown_box1') {
        $("#select1").show();
    } else {
        $("#select1").hide();
    }
});