HTML-vue实现鼠标悬停显示二级菜单，和离开关闭二级菜单

错误使用 mouseout

正确使用 mouseleave

<template>
    <div class="header">
        <nav class="lc-header">
            <ul>
                <li><a>力扣</a></li>
                <li><a>学习</a></li>
                <li><a>题库</a></li>
                <li><a>讨论</a></li>
                <li><a>竞赛</a></li>
                <li><a>求职</a></li>
                <li>
                    <div class="shopMenu" @mouseover="showMemu" @mouseleave="closeMemu">
                        <svg viewBox="0 0 24 24" width="1em" height="1em" class="shopMenu-icon">
                            <path fill-rule="evenodd"
                                  d="M4 4h16v2H4V4zm10 14h4v2h-4v-2zM4 7h16l1 5v2h-1v6h-2v-6h-4v6H4v-6H3v-2l1-5zm2 7v4h6v-4H6zm12.96-2l-.6-3H5.64l-.6 3h13.92z">
                            </path>
                        </svg>
                        <span>商店</span>
                        <svg viewBox="0 0 24 24" width="1em" height="1em" class="shopMenu-icon-1">
                            <path fill-rule="evenodd" d="M7 10l5 5 5-5z"></path>
                        </svg>
                        <div class="shop-memu-item" v-if="showMentuItem" @mouseover="showMemu" @mouseleave="closeMemu">
                            <div class="content">周边商城</div>
                            <div class="content">力扣周边</div>
                            <div class="content">Plus会员</div>
                        </div>
                    </div>
                </li>
            </ul>
            <div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div>新功能</div>
        </nav>
    </div>
</template>

<script>
    export default {
        name: "LeetHeader",
        data() {
            return {
                showMentuItem: false,
            }
        },
        methods: {
            showMemu: function () {
                this.showMentuItem = true;
            },
            closeMemu: function () {
                    this.showMentuItem = false;
                
            }
        }
    }
</script>

<style scoped>
    @import "css/header.css";
</style>

css

.lc-header {
    box-shadow: 0px 0px 1px grey;
    /*border-bottom: 1px solid gray;*/
    height: 50px;
}

.lc-header ul {
    list-style: none;
    float: left;
    display: inline-flex;
    position: absolute;
    left: 80px;
    font-weight: bold;

}

.lc-header ul li {
    margin: 0px 10px;
}

.shopMenu {
    color: rgba(255, 161, 25, 1);
    position: relative;
    top:-4px;
}

.shopMenu-icon {
    fill: currentcolor;
    width: 21px;
    height: 21px;
    position: relative;
    top: 5px;
}

.shopMenu-icon-1 {
    fill: currentcolor;
    width: 21px;
}
.shop-memu-item{
    width: 90px;height: 100px;
    border:1px solid #d8d7d7;
    display: flex;
    position: absolute;
    flex-direction: column;
    z-index: 22;
}
.shop-memu-item .content{
    margin: 5px 2px;
    font-weight: normal;
    background-color: white;
}