Sliding thought of navigation bar of jq instance

1. Do you want the mouse to slide to the jade and not disappear? I have been thinking about it for a long time, but I have no idea about how to write it.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            ul,
            li {
                margin: 0;
                padding: 0;
            }
            
            li {
                list-style: none;
            }
            
            .clearfix:after {
                content: "";
                display: block;
                clear: both;
            }
            
            -sharpwarp .list {
                width: 200px;
                cursor: pointer;
                height: 50px;
                background-color: -sharpc7171f;
                color: -sharpfff;
                font-size: 15px;
                line-height: 50px;
                padding-left: 30px;
                position: relative;
            }
            
            -sharpwarp .list div {
                float: left;
            }
            
            -sharpwarp .list>span {
                float: right;
                margin-right: 30px;
            }
            
            -sharpwarp .list .listdata {
                position: absolute;
                top: 0;
                left: 100%;
                color: black;
                border: 1px solid -sharpccc;
                display: none;
            }
            
            -sharpwarp .list .show {
                display: block;
            }
            
            -sharpwarp .list .listdata li {
                width: 200px;
                font-size: 12px;
            }
            
            -sharpwarp .list .listdata li span {
                margin-right: 30px;
            }
        </style>
        <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>
        <ul id="warp">
            <li class="list clearfix">
                <div class="jewelry"></div>
                <span>></span>
                <ul class="listdata">
                    <li>
                        <span></span>
                        <span></span>
                    </li>
                    <li>
                        <span></span>
                        <span></span>
                    </li>
                    <li>
                        <span></span>
                        <span></span>
                    </li>
                </ul>
            </li>
        </ul>
        <script type="text/javascript">
            var $ol = $("-sharpwarp  li");
            var $ul = $("-sharpwarp ul");
            var index;
            $ol.on("mouseover", function(event) {
                console.log($(this).index())
                $(event.target).find(".listdata").attr("class", function() {
                    return $(this).attr("class") + " show";
                });

            });
            $ol.on("mouseout", function(event) {

                $(event.target).find(".listdata").removeClass("show");

            });
        </script>
    </body>

</html>

var $outerUL = $('-sharpwarp'); $outerUL.on('mouseover', '.list', function(event) { $(this).find('.listdata').addClass('show'); }); $outerUL.on('mouseout', '.list', function(event) { $(this).find('.listdata').removeClass('show'); });