کلاس رو داخل کدهای html درست ننوشتید:

<li class="has-sub-menu">

top و right اصلاح شد(این مقادیر اگر زیاد شدن باید در درستیشان شک کرد) و همچنین کلاسی که باید display: block شود. ضمن اینکه کد زیر منو هم باید داخل li مربوط به خودش در منو قرار بگیرد که فیکس شد.

.sub-menu{
  position: absolute;
  background-color: #7e1cc1;
      top: 100%;
    right: 0px;
  display: none;
  box-shadow: 0px 0px 20px 5px #000;
  border-radius: 30px;
}
li.has-sub-menu:hover .sub-menu{
  display: block;
}

لینک تغییرات