需要注意的是 二级菜单的盒子要在最大的盒子里面 要把它撑开 而不是和导航一个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>
<!-- 语言切换 -->
<div class="HeaderLanguage">
<span style="padding-right:10px" :class="{ active: isActive1 }" @click="toggleActive(1)"
>中文{
{$t('appHeader.pickerTitle') }}</span
>
<span :class="{ active: isActive2 }" @click="toggleActive(2)"
>Eng</span
>
<!-- <van-nav-bar
:title="$route.name"
:left-text="$t('appHeader.back') || '返回'"
:right-text="$t('appHeader.pickerTitle') || '语言选择'"
left-arrow
@click-left="handleBack"
@click-right="handleSelectLang"
/> -->
</div>
</div>
<ul class="twoUl" v-if="activeIndexFlag">
<li
class="TwoList"
v-for="(subItem, subIndex) in subMenuItems"
:key="subIndex"
>
{
{ subItem }}
</li>
</ul>
</div>
</div>
data声明的变量：
export default {
data() {
return {
menuItems: ["Home", "About", "Services", "Contact"],
subMenuItems: [
"Submenu1",
"Submenu2",
"Submenu3",
"Submenu1",
"Submenu2",
"Submenu3",
"Submenu1",
"Submenu2",
"Submenu3",
"Submenu1",
"Submenu2",
"Submenu3",
],
activeIndex: null,
activeIndexFlag: false,
isActive1: false,
isActive2: false,
language:'zh'
};
},
js方法：
methods: {
//显示
setActiveIndex(index) {
this.activeIndex = index;
this.activeIndexFlag = true;
},
//隐藏
clearActiveIndex() {
this.activeIndex = null;
this.activeIndexFlag = false;
},
}
css样式：
<style lang="less" scoped>
.HeaderBody {
display: flex;
justify-content: space-between;
align-items: center; /* 垂直居中 */
flex-direction: column;
background-color: #262d5f; /* 红色，透明度为 0.5 */
box-sizing: border-box;
}
.HeaderBody:hover {
// background-color: #262d5f; /* 红色，透明度为 0.5 */
// transition: background-color 1s ease; /* 过渡属性 */
// opacity: 0.7;
}
.headerBox {
display: flex;
align-items: center;
width: 100%;
}
.Header {
position: fixed;
z-index: 50;
top: 0;
left: 0;
width: 100%;
}
.Logo {
padding-left: 50px;
}
.headerLogo {
width: 50px;
height: 50px;
}
.menu {
display: flex;
justify-content: center;
background-color: rgba(0, 0, 0, 0);
width: 800px;
color: #ffffff;
}
ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
columns: 2;
}
li {
position: relative;
z-index: 2;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
}
li::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
}
li:hover::after {
transform: scaleX(1);
}
ul ul {
position: absolute;
display: none;
background-color: #262d5f; /* 红色，透明度为 0.5 */
list-style-type: disc;
}
li:hover > ul {
display: block;
}
.twoUl {
box-sizing: border-box;
width: 50%;
height: 100%;
padding-left: 4%;
color: #ffffff;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.TwoList {
width: calc(100% / 2 - 30px);
display: flex;
padding: 10px;
box-sizing: border-box;
flex-wrap: wrap;
}
.TwoList:hover {
border-bottom: solid 1px #fff;
transition: transform 0.3s ease;
}
// 语言切换
.HeaderLanguage {
color: rgb(196, 192, 192);
font-size: 12px;
font-weight: bolder;
cursor: pointer;
}
.active {
color: #ffffff;
border-bottom: 3px solid #91d010;
}
// 轮播图
.swiper-slide {
width: 100%;
}
.swiper-slide img {
width: 100%;
height: 4rem;
}
</style>
屏幕效果链接：https://live.csdn.net/v/302286?spm=1001.2014.3001.5501
最后
感谢阅读，如有不足之处，欢迎在评论区讨论！