Vue

by Max Sinev

HTML

<div id="app">
  <div>
    <div @mouseover="showMenu = true" style="position: relative;display:inline-block">
      Products
      <div class="menu" v-show="showMenu" @mouseleave="showMenu = false">
        <div>Products</div>
        <ol>
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
          <li><a href="#">Four</a></li>
        </ol>
      </div>
    </div>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.menu {
  position: absolute;
  background: #ccc;
  top: 0;
  left: 0;
  width: 150px;
}

Vue

new Vue({
  el: "#app",
  data: {
    showMenu: false
  }
})