چون تو تصویر، li مربوط به has-sub-menu بعد از ul زیرمنو بسته نشده. دقت کن تگی که زیر منو داره باید li اش جایی بسته بشه که تو میای اون منو بعد از هاور رو براش ایجاد میکنی.

اصلاح کدت اینه:

<ul class="test">
    <li>
        <a href="#">خانه</a>
    </li>
    <li class="has-sub-menu">
        <a href="#">دوره‌های آموزشی</a>
        <ul class="sub-menu">
            <li><a href="#">طراحی وب</a></li>
            <li><a href="#">برنامه نویسی</a></li>
            <li><a href="#">گرافیک</a></li>
        </ul>
    </li>
    <li>
        <a href="#">درباره ما</a>
    </li>
    <li>
        <a href="#">تماس با ما</a>
    </li>
    <li>
        <a href="#">پشتیبانی</a>
    </li>
</ul>