Menu bị mất khi hover chuột

Mình có tạo một menu đa cấp khi hover vào thẻ li cấp 1 thì nó hiện ra menu cấp 2 nhưng khi hover vào thẻ li trong menu cấp 2 thì tự nhiên biến mất, mình không hiểu lỗi gì.

Đây là đoạng css của mình.

Code:

ul.sp-megamenu-parent {}
.sp-megamenu-parent li {
   position: relative !important;
   line-height: 1.3em;vertical-align: middle;
  }
.sp-megamenu-parent li .sub-menu{
    display:none !important;
    margin-top:20px;
    padding-left:20px;
    cursor: default;
    background: #fff !important;
    position:absolute !important;
    box-shadow: 0 3px 5px 0 rgba(0,0,0,0.2) !important;
    width:250px !important;
  }
.sp-megamenu-parent li:hover>.sub-menu{
    display:block !important;
    
  }
 ul.sp-megamenu-parent ul {
 z-index: 598;
 width: 100%;
 }
.sp-megamenu-parent .sub-menu>li{
    line-height: 2.5em;
    border-bottom: 1px solid #E91E63;
    text-align: left;
    
}
.sp-megamenu-parent .sub-menu>li:hover {
    background:#ea1957;}
.sp-megamenu-parent .sub-menu>li>a {
    text-decoration:none;
    }
.sp-megamenu-parent .sub-menu>li>a:hover{
    color:#fff !important;
    text-decoration:none;
}