css层叠导航栏

效果：

代码：

<template>
  <div class="header-box" :class="{opacityNav:isBackgroundOpacity}">
    <div class="small-box">
      <div class="nav-box">
        <div class="logo">
          <a href="#" class="mot2" onClick="eventTrack('btn_logo')">
            <img src="../assets/images/logo.png" alt="食品logo" style="display:inline-block;width:50px;height: 60px;"/>
          </a>
        </div>
        <div class="nav">
          <ul class="sub1">
            <li><a href="/" class="mot2">首页</a></li>
            <li><a href="/wheatenfood" class="mot2">面食产品</a>
              <ul class="sub2 depth_about">
                <li><a href="/wheatenfood/#">黑麦苦荞系列</a></li>
                <li><a href="/#">营养白面系列</a></li>
                <li><a href="/#">国际生态有机系列</a></li>
              </ul>
            </li>
            <li><a href="/seasoning" class="mot2">调味佐料</a>
              <ul class="sub2 depth_business">
                <li><a href="/#">传统调味系列</a></li>
                <li><a href="/#">地方特色系列</a></li>
                <li><a href="/#">国际生态有机系列</a></li>
              </ul>
            </li>
            <li><a href="/news" class="mot2">资讯动态</a>
              <ul class="sub2 depth_pr">
                <li><a href="#">公司新闻</a></li>
                <li><a href="#">行业动态</a></li>
              </ul>
            </li>
            <li><a href="/about" class="mot2">关于我们</a>
              <ul class="sub2 depth_recruit">
                <li><a href="#">联系方式</a></li>
                <li><a href="#">公司介绍</a></li>
                <li><a href="#">荣誉资质</a></li>
                <li><a href="#">近期动态</a></li>
              </ul>
            </li>
            <li><a href="https://www.taobao.com/" class="mot2 btn_inquiry"
                   target="_blank">官方商城</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      isBackgroundOpacity: false
    }
  },
  methods: {
    isOpacity() {
      console.log('变透明')
    },
  },
  mounted() {
    this.isOpacity()
    console.log(this.$route.path);
    if (this.$route.path == '' || this.$route.path == '/' || this.$route.path == '/index') {
      this.isBackgroundOpacity = true
    }
  },
  created() {
  },
  watch: {
    $route(to, from) {
      console.log(to)
      console.log(from)

    },

  },
}
</script>

<style lang="scss" scoped>
.opacityNav {
  //opacity: 0.5;
}

.header-box {
  width: 100%;
  position: fixed;
  z-index: 9999;
  top: 0;
  background-color: lightseagreen;

  .small-box {
    width: 1200px;
    margin: 0 auto;

    .nav-box {
      height: 70px;
      line-height: 70px;
      color: white;

      .logo {
        float: left;

        a {
          img {
            padding-top: 5px;
          }
        }
      }

      .nav {
        float: left;

        a:hover {
          color: lightcoral;
        }

        .sub1 {
          li {
            float: left;

            .mot2 {
              margin: 0 66px;
            }

            .sub2 {
              display: none;
              position: relative;
              left: 66px;

              li {
                float: none;
              }
            }
          }


        }

      }

      .nav:hover {
        .sub1 {
          li {
            .sub2 {
              display: block;
            }
          }
        }

      }
    }
  }

}

</style>