css+jq鼠标经过显示下拉框

一、鼠标经过显示下拉框

html如下：

<div class="header_navbar_menu" >
            <a href="javascript:void(0)" class="link_us" id="contact">
                <i class="icon-phone"></i>
                联系我们
                <i class="icon-triangle-solid-down"></i>
            </a>      
 </div>

<ul class="items-content">
            <li>
                售后服务:010-869236874
            </li>
            <li>
                咨询时间： 周一至周五 9:00-11:30，14:00-18:00
            </li>
           
</ul>

css如下：

.items-content {
    display: none;
    position: absolute;
    top: 50px;
    right: 23px;
    width: 380px;
    line-height: 28px;
    text-align: left;
    padding: 20px 17px 20px 20px;
    z-index: 9999;
    min-width: 10rem;
    margin: 0.125rem 0 0;
    font-size: 1rem;
    color: #333;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
}

jq如下：

// 鼠标经过联系我们显示下拉菜单
    $("#contact").mouseover(function() {
        $(".items-content").stop().show();
    });
    $("#contact").mouseout(function() {
        $(".items-content").stop().hide();
    });
    // 鼠标放到顶部的“联系我们”，解决下拉框消失问题
    $(".items-content").mouseover(function() {
        $(this).siblings("ul").show();
        $(".items-content").stop().show();
    });
    $(".items-content").mouseout(function() {
        $(".items-content").stop().hide();
    });

鼠标经过显示下拉框时，当将鼠标移动到下拉框，下拉框会消失

解决办法是：需要给下拉框也加上鼠标经过显示和隐藏的效果