Vue 实现垂直菜单分类栏目，鼠标移入下方出现悬浮二级菜单容器效果

需要注意的是 二级菜单的盒子要在最大的盒子里面 要把它撑开 而不是和导航一个div ，下面是实现的效果 但有点潦草 具体样式需自行调整

具体代码如下：

html代码：

  

      

        

          

            
          
          

            

              

                {{ item }}
              
            
          
​
          
          

            中文{{$t('appHeader.pickerTitle') }}
            Eng
            
          
        
​
        

          

            {{ subItem }}
          
        
      
    

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样式：

屏幕效果链接：https://live.csdn.net/v/302286?spm=1001.2014.3001.5501

最后

感谢阅读，如有不足之处，欢迎在评论区讨论！