نشان ندادن زیر منو

سلام بنده هر کاری می‌کنم زیر منو رو نشون نمی‌دهد
توی IDE های مختلف هم امتحان کردم کلی سرچ هم کردم ولی هر تغییری که می‌دهم باز نشان نمی‌دهد.

<!DOCTYPE html>
<html lang="en" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>جلسه دهم</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav class="nav">
      <ul class="test">
        <li><a href="" class="#">خانه</a></li>
        <li class="has-sub-menu"><a href="" class="#">دوره‌های آموزشی</a></li>
        <ul class="sub-menu">
          <li><a href="#">طراحی وب </a></li>
          <li><a href="#">بک اند</a></li>
          <li><a href="#">الکترونیک</a></li>
        </ul>
        <li><a href="" class="#">درباره ما</a></li>
        <li><a href="" class="#">تماس با ما</a></li>
        <li><a href="" class="#">پشتیبانی</a></li>
      </ul>
    </nav>
    <!-- <input type="text" class="input"> -->
  </body>
</html>

@font-face {
  font-family: Vazir-Medium;
  src: url("../font/Vazir-Medium.eot") format("eot"),
    url("../font/Vazir-Medium.woff") format("woff"),
    url("../font/Vazir-Medium.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: Vazir-Medium;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* menu style */
nav.nav {
  background-color: #efefef;
  font-size: 14px;
  padding: 10px;
}
.test li {
  display: inline;
  padding: 10px;
  margin: 0 5px;
}
.test li a:hover {
  color: #0000ff;
}
.has-sub-menu {
  position: relative;
}
.sub-menu li {
  display: block;
}
.sub-menu {
  top: 44px;
  right: 80px;
  position: absolute;
  background-color: #efefef;
  display: none;
}
.has-sub-menu:hover .sub-menu {
  display: block;
}

<body> <nav class="nav"> <ul class="test"> <li><a href="" class="#">خانه</a></li> <li class="has-sub-menu"> <a href="" class="#">دوره‌های آموزشی</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="" class="#">درباره ما</a></li> <li><a href="" class="#">تماس با ما</a></li> <li><a href="" class="#">پشتیبانی</a></li> </ul> </nav>  </body> </html>