Vue.js 和 CSS 实现带悬停提示的网站导航栏

<template>
  <div class='container'>
    <nav class='navbar'>
      <div class='logo'>
        <img src='./assets/logo.png' alt='Logo'>
      </div>
      <ul class='menu'>
        <li class='menu-item' @mouseover='showContent('intro')' @mouseleave='hideContent('intro')'>
          <a href='#'>简介</a>
          <div class='content' v-show='showIntro'>
            <p>这里是简介的内容</p>
          </div>
        </li>
        <li class='menu-item' @mouseover='showContent('news')' @mouseleave='hideContent('news')'>
          <a href='#'>新闻中心</a>
          <div class='content' v-show='showNews'>
            <p>这里是新闻中心的内容</p>
          </div>
        </li>
        <li class='menu-item' @mouseover='showContent('system')' @mouseleave='hideContent('system')'>
          <a href='#'>制度公告</a>
          <div class='content' v-show='showSystem'>
            <p>这里是制度公告的内容</p>
          </div>
        </li>
      </ul>
    </nav>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showIntro: false,
      showNews: false,
      showSystem: false
    }
  },
  methods: {
    showContent(type) {
      this.showIntro = type === 'intro'
      this.showNews = type === 'news'
      this.showSystem = type === 'system'
    },
    hideContent(type) {
      if (type === 'intro') {
        this.showIntro = false
      } else if (type === 'news') {
        this.showNews = false
      } else if (type === 'system') {
        this.showSystem = false
      }
    }
  }
}
</script>
<style>
.container {
  width: 100%;
  margin: 0 auto;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  height: 80px;
}

.logo {
  width: 40%;
}

.logo img {
  width: 100%;
  height: auto;
}

.menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 60%;
}

.menu-item {
  position: relative;
  margin: 0 10px;
}

.menu-item .content {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  width: 200px;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: none;
}

.menu-item .content p {
  margin: 0;
  padding: 5px 0;
}

.menu-item:hover .content {
  display: block;
}
</style>