web PC端鼠标移入出现下拉二级菜单的导航栏

<template>
	<div class="header-box">
		<div class="list-box">
			<div
				class="list-item-wrapper"
				v-for="item in list"
				:key="item.id"
				@mouseenter="selectActive(item.id)"
				@mouseleave="selectActive('')"
			>
				<div class="list-item">
					{{ item.name }}
				</div>
				<div class="list-item-children" v-if="active === item.id">
					<div
						class="list-item-children-item"
						v-for="child in item.children"
						:key="child.id"
						@click="handleMenu(child.id)"
					>
						{{ child.name }}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref, onMounted, computed, watchEffect, getCurrentInstance } from 'vue';
	const { proxy } = getCurrentInstance();

	import { useFlexibleStore } from '@/stores/flexible';
	const flexibleStore = useFlexibleStore();

	onMounted(() => {});

	const list = ref([
		{
			id: 1,
			name: '产品1',
			children: [
				{
					id: 11,
					name: '产品1-1',
				},
				{
					id: 12,
					name: '产品1-2',
				},
				{
					id: 13,
					name: '产品1-3',
				},
			],
		},
		{
			id: 2,
			name: '产品2',
			children: [
				{
					id: 21,
					name: '产品2-1',
				},
				{
					id: 22,
					name: '产品2-2',
				},
				{
					id: 23,
					name: '产品2-3',
				},
			],
		},
	]);
	const active = ref('');
	let timer = null;
	function selectActive(id) {
		clearTimeout(timer);
		if (id) {
			active.value = id;
		} else {
			timer = setTimeout(() => {
				active.value = '';
			}, 100);
		}
	}
	function handleMenu(id) {
		console.log(id);
	}
</script>

<style lang="scss" scoped>
	.header-box {
		position: sticky;
		top: 0;
		z-index: 100;
		width: 100%;
		background: #12dad0;
		color: #fff;
		padding: 30px;
	}

	.list-box {
		display: flex;
	}
	.list-item-wrapper {
		display: inline-block;
		position: relative;
	}
	.list-item {
		cursor: pointer;
		padding: 0 20px;
		font-size: 20px;
		&:hover {
			color: #f80505;
		}
	}
	.list-item-children {
		position: absolute;
		left: 50%;
		bottom: -10px;
		transform: translate(-50%, 100%);
		background: #fff;
		padding: 10px;
		width: max-content;
		border-radius: 5px;
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
		z-index: 100;

		.list-item-children-item {
			cursor: pointer;
			color: #000;
			margin-bottom: 10px;
			&:hover {
				color: #f80505;
			}
		}
	}
</style>