Menu duy chuyển transition

****HTML:
<div class="nav">
<ul>
<li>
<a href="#">Sản phẩm</a>
<ul class="sub-menu">
<li><a href="#">Sản phẩm 01</a></li>
<li><a href="#">Sản phẩm 02</a></li>
<li><a href="#">Sản phẩm 03</a></li>
</ul>
</li>
</ul>
</div>

****CSS
.nav > ul > li{
position:relative;
}

.nav > ul > li:last-child .sub-menu {
    right: 0;
    left: auto;
}

.sub-menu {
    background-color: #fff;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 150px;
    left: 0;
    border: 2px solid #ddd;
    z-index: 5;
    transition: all 0.4s ease-in-out;
    line-height: normal;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
    width: 250px;
}
.nav > ul > li:hover>.sub-menu {
    visibility: visible;
    opacity: 1;
    top: 40px;
    transition: all 0.2s ease-in-out;
    top: 100%;
    display: block;
    z-index: 9999;
    border: none;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
    width: 250px;
}
.nav > ul > li > ul > li:hover > a{  
  padding-left: 5px;

  transition: .3s;
}