💻 آخرین فرصت یادگیری برنامه‌نویسی با آفر ویژه قبل از افزایش قیمت در ۵ آذر ماه (🎁 به همراه یک هدیه ارزشمند )
۰ ثانیه
۰ دقیقه
۰ ساعت
۱ Ahmad As
نشان ندادن زیر منو
Mehdi H حل شده توسط Mehdi H

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

سلام. شما باید <"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 ۰۶ دی ۱۳۹۹، ۱۴:۲۶