영카트 기본basic테마에서 전체 카테고리를 클릭이아닌 마우스 오버했을때 나타나고 마우스 아웃했을때 꺼지게 하고싶습니다.

마우스오버했을때 나오게는 처리했는데 마우스 아웃했을때가 잘안되네요 ...

<div id="category">
    <button type="button" class="close_btn"><i class="fa fa-times" aria-hidden="true"></i> 카테고리<span class="sound_only">닫기</span></button>

    <div class="ct_wr">
        <?php
        $mshop_ca_href = G5_SHOP_URL.'/list.php?ca_id=';
        $mshop_ca_res1 = sql_query(get_mshop_category('', 2));
        for($i=0; $mshop_ca_row1=sql_fetch_array($mshop_ca_res1); $i++) {
            if($i == 0)
                echo '<ul class="cate">'.PHP_EOL;
        ?>
            <li class="cate_li_1">
                <a href="<?php echo $mshop_ca_href.$mshop_ca_row1['ca_id']; ?>" class="cate_li_1_a"><?php echo get_text($mshop_ca_row1['ca_name']); ?></a>
                <?php
                $mshop_ca_res2 = sql_query(get_mshop_category($mshop_ca_row1['ca_id'], 4));

                for($j=0; $mshop_ca_row2=sql_fetch_array($mshop_ca_res2); $j++) {
                    if($j == 0)
                        echo '<ul class="sub_cate sub_cate1">'.PHP_EOL;
                ?>
                    <li class="cate_li_2">
                        <a href="<?php echo $mshop_ca_href.$mshop_ca_row2['ca_id']; ?>"><?php echo get_text($mshop_ca_row2['ca_name']); ?></a>
                    </li>
                <?php
                }

                if($j > 0)
                    echo '</ul>'.PHP_EOL;
                ?>
            </li>
        <?php
        }

        if($i > 0)
            echo '</ul>'.PHP_EOL;
        else
            echo '<p class="no-cate">등록된 분류가 없습니다.</p>'.PHP_EOL;
        ?>
    </div>
</div>

<script>
$(function (){
    var $category = $("#category");

    $("#menu_open").mouseover( function() {
        $category.css("display","block");
    });

    $("#category .close_btn").on("click", function(){
        $category.css("display","none");
    });
});
$(document).mouseup(function (e){
    var container = $("#category");
    if( container.has(e.target).length === 0)
    container.hide();
});
</script>

css

#category{display:none;position:absolute;top:0;left:0;width:100%;border:2px solid #42771F;border-top:0;background:#fff;;z-index:100;text-align:left; }
#category .ct_wr{padding:20px 20px 20px 5px;}
#category ul:after {display:block;visibility:hidden;clear:both;content:""}
#category .cate{line-height:20px;}
#category .cate_li_1{float:left;text-align:left;width:180px;min-height:200px;margin-left:15px}
#category .cate_li_1_a{background:#f3f3f3;text-align:center;padding:10px;margin-bottom:5px;display:block;font-weight:bold}
#category .cate_li_2 {width:100%;float:none;;line-height:20px;;margin:0}
#category .cate_li_2  a {color:#6d6d6d;display:block;padding:0 5px}
#category a:hover{color:#c92033}
#category .close_btn{;;width: 100%;background:#42771F;border: 0;text-align: left;color: #fff;padding: 0 20px;height: 40px;font-weight: bold;font-size: 1.167em;}