需要注意的是 二级菜单的盒子要在最大的盒子里面 要把它撑开 而不是和导航一个div ,下面是实现的效果 但有点潦草 具体样式需自行调整
具体代码如下:
html代码:
<div class="Header"> <div class="HeaderBody" @mouseleave="clearActiveIndex"> <div class="headerBox"> <div class="Logo"> <img class="headerLogo" src="@/assets/logo.png" /> </div> <div class="menu"> <ul> <li v-for="(item, index) in menuItems" :key="index" :class="{ active: activeIndex === index }" @mouseover="setActiveIndex(index)" > { { item }} </li> </ul> </div> <!-- 语言切换 --> <