a

src/components/menu.vue

@@ -1,25 +1,18 @@
 <template>
   <div class="menuDiv">
     <ul class="menuUl">
-      <li
-        v-for="(item, index) in menuData"
-        :key="item.value"
-        :class="{ menuli: true, active: activeIndex === index }"
-        @mouseover="menuMouseOver(index)"
-        @mouseleave="menuMouseLeave(index)"
-      >
+      <li v-for="item in menuData" :key="item.value" class="menuli">
         <router-link to="home">
           <span class="menuLine"></span>{{ item.title }}
           <i class="el-icon-arrow-right"></i>
         </router-link>
-        <div v-if="activeIndex === index">
-          <div class="menuCon" v-if="item.subList">
-            <ul class="menuConUl">
-              <li v-for="subitem in item.subList" :key="subitem.subValue">
-                {{ subitem.subTitle }}123
-              </li>
-            </ul>
-          </div>
+
+        <div class="menuCon">
+          <ul class="menuConUl">
+            <li v-for="subitem in item.subList" :key="subitem.subValue">
+              {{ subitem.subTitle }}123
+            </li>
+          </ul>
         </div>
       </li>
     </ul>
@@ -32,8 +25,6 @@ export default {
   components: {},
   data() {
     return {
-      activeIndex: "a",
-      menuConShow: false,
       menuData: [
         {
           title: "文件柜",
@@ -41,7 +32,7 @@ export default {
           subList: [
             {
               subTitle: "选项",
-              subValue: 12
+              subValue: 11
             },
             {
               subTitle: "选项",
@@ -49,7 +40,7 @@ export default {
             },
             {
               subTitle: "选项",
-              subValue: 12
+              subValue: 13
             }
           ]
         },
@@ -91,16 +82,6 @@ export default {
         }
       ]
     };
-  },
-  methods: {
-    menuMouseOver(index) {
-      this.activeIndex = index;
-      this.menuCon = true;
-    },
-    menuMouseLeave(index) {
-      this.activeIndex = "a";
-      this.menuCon = false;
-    }
   }
 };
 </script>
@@ -120,8 +101,7 @@ export default {
       border-bottom: 0.1rem solid #e5e5e5;
       padding: 0 1.6rem;
       box-sizing: border-box;
-      position: relative;
-      &.active {
+      &:hover {
         background: #ffddd3;
         a {
           color: #fd5522;
@@ -132,15 +112,18 @@ export default {
         .menuLine {
           background: #fd5522;
         }
+        .menuCon {
+          display: block;
+        }
       }
       .menuLine {
         display: inline-block;
         height: 1.4rem;
         width: 0.2rem;
         background: #fff;
-        position: absolute;
-        left: 0;
-        top: 1.6rem;
+        // position: absolute;
+        // left: 0;
+        // top: 1.6rem;
       }
       i {
         float: right;
@@ -158,6 +141,7 @@ export default {
     top: 0;
     right: -60rem;
     z-index: 99;
+    display: none;
     .menuConUl {
       list-style: none;
       overflow: hidden;