<div id="app">
  <ul class="navbar">
    <li><a href="#home">Home</a></li>
    <li><a href="#products">Products</a></li>
    <li class="dropdown">
      <button class="dropbtn" @mouseover="show = true" @mouseout="show = false">Dropdown 
        <i class="down-arrow"></i>
      </button>
      <transition name="dropdown">
        <ul class="dropdown-content" v-if="show" @mouseover="show = true" @mouseout="show = false">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
       </ul>
     </transition>
    </li> 
  </ul> 
</div> 

.down-arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white;
  display: inline-block;
  padding-top: 2px;
}

ul {
  list-style-type: none;
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
  margin: 0;
  padding: 0;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: black;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px; 
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; 
  margin: 0; 
}

.dropdown-content {
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown-enter,
.dropdown-leave-to {
  transform: scaleY(0.7);
  opacity: 0;
}

.dropdown-enter-to,
.dropdown-leave {
  opacity: 1;
  transform: scaleY(1);
}

.dropdown-enter-active,
.dropdown-leave-active {
  transition: all 0.3s ease-out;
  transform-origin: top center;
}

new Vue({
  el: '#app',
  data: {
    show: false
  }
})