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

Question

سلام بنده هر کاری می کنم زیر منو رو نشون نمی دهد
توی 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;
}

فایل پیوست

طراحی وب

Ahmad As

6 دی 99

Answer 1

حذف شده

سلام. شما باید <"ul class="sub-menu> رو داخل تگ <"li class="has-sub-menu> بذارید تا وقتی که hover میکنید زیر منو نشون داده بشه.

  <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>

    <!-- <input type="text" class="input"> -->
  </body>
</html>

توسط

Mehdi H

6 دی 99

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

سوالات مرتبط