Vue implements vertical menu classification columns. When the mouse is moved below, a floating secondary menu container effect appears.

It should be noted that the box of the secondary menu should be opened inside the largest box and not a div with the navigation. The following is the effect achieved, but it is a bit sloppy. The specific style needs to be adjusted by yourself.

The specific code is as follows:

html code:

  <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>
​
          <!-- Language switching-->
          <div class="HeaderLanguage">
            <span style="padding-right:10px" :class="{ active: isActive1 }" @click="toggleActive(1)"
              >Chinese{
  
  {$t('appHeader.pickerTitle') }}</span
            >
            <span :class="{ active: isActive2 }" @click="toggleActive(2)"
              >Eng</span
            >
            <!-- <van-nav-bar
            :title="$route.name"
            :left-text="$t('appHeader.back') || 'Return'"
            :right-text="$t('appHeader.pickerTitle') || 'Language selection'"
            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>

Variables declared by 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 method:

  methods: {
       //show
    setActiveIndex(index) {
      this.activeIndex = index;
      this.activeIndexFlag = true;
    },
    //hide
    clearActiveIndex() {
      this.activeIndex = null;
      this.activeIndexFlag = false;
    },
  }

css style:

<style lang="less" scoped>
.HeaderBody {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Vertically centered*/
  flex-direction: column;
  background-color: #262d5f; /* Red, transparency is 0.5 */
  box-sizing: border-box;
}
.HeaderBody:hover {
 // background-color: #262d5f; /* Red, transparency is 0.5 */
// transition: background-color 1s ease; /* transition properties*/
 // 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; /* Red, transparency is 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;
}
// language switch
.HeaderLanguage {
  color: rgb(196, 192, 192);
  font-size: 12px;
  font-weight: bolder;
  cursor: pointer;
}
.active {
  color: #ffffff;
  border-bottom: 3px solid #91d010;
}
​
// Carousel image
.swiper-slide {
  width: 100%;
}
.swiper-slide img {
  width: 100%;
  height: 4rem;
}
</style>

Screen effect link: https://live.csdn.net/v/302286?spm=1001.2014.3001.5501

at last

Thanks for reading. If you have any deficiencies, please feel free to discuss them in the comment area!