تمرین جلسه دهم - باز شدن زیر منو فقط هنگام کلیک کردن

با سلام خدمت استاد گرامی و دوستان عزیز

دوستان منو مورد نظر که کدهاش رو پایین ملاحظه می‌کنید زیر منو‌های اون فقط هنگام کلیک کردن باز میشوند.

برای اینکار به جای استفاده از hover: باید از focus-within: استفاده کنید.در اینصورت property‌ها وقتی عمل می‌کنند که focus روی عناصر child ( زیر منو ) صورت بگیرد.

کد‌های HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>7Learn-project</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav class="menu">
      <ul class="list">
        <li class="list-item , host">
          <a href="#"
            >Hosting<i class="material-icons , host-down">expand_more</i
            ><i class="material-icons , host-up , up">expand_less</i></a
          >
          <ul id="host" class="submenu">
            <li class="submenu-item">
              <a href="#">
                <h3>Shared Web Hosting</h3>
                <p>For small to medium websites</p>
              </a>
            </li>
            <li class="submenu-item">
              <a href="#">
                <h3>Cloud Hosting</h3>
                <p>For large scale project</p>
              </a>
            </li>
            <li class="submenu-item">
              <a href="#">
                <h3>Email Hosting</h3>
                <p>Promote your business every outreach.</p>
              </a>
            </li>
          </ul>
        </li>
        <li class="list-item , vps">
          <a href="#"
            >VPS<i class="material-icons , vps-down">expand_more</i
            ><i class="material-icons , vps-up , up">expand_less</i></a
          >
          <ul id="vps" class="submenu">
            <li class="submenu-item">
              <a href="#">
                <h3>VPS Hosting</h3>
                <p>Dedicated resources to scale.</p>
              </a>
            </li>
            <li class="submenu-item">
              <a href="#">
                <h3>Minecraft Hosting</h3>
                <p>Share your Minecraft experience.</p>
              </a>
            </li>
            <li class="submenu-item">
              <a href="#">
                <h3>Windows VPS</h3>
                <p>Windows OS based on VPS solutions.</p>
              </a>
            </li>
          </ul>
        </li>
        <li class="list-item , domain">
          <a href="#"
            >Domain<i class="material-icons , domain-down">expand_more</i
            ><i class="material-icons , domain-up , up">expand_less</i></a
          >
          <ul id="domain" class="submenu">
            <li class="submenu-item">
              <a href="#">
                <h3>Domain Checker</h3>
                <p>Find the perfect domain name.</p>
              </a>
            </li>
            <li class="submenu-item">
              <a href="#">
                <h3>WHOIS Database</h3>
                <p>Lookup tool to find WHOIS information.</p>
              </a>
            </li>
            <li class="submenu-item">
              <a href="#">
                <h3>Domain Transfer</h3>
                <p>Want to transfer you domain to Hostinger?</p>
              </a>
            </li>
          </ul>
        </li>
      </ul><div class="expand-less"></div>
    </nav>
  </body>
</html>

کد‌های CSS

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
* {
  font-family: "Noto Sans", sans-serif;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  text-decoration: none;
  font-size: 18px;
  list-style-type: none;
}
.menu {
  height: 50px;
  background-color: darkgrey;
  position: relative;
}
.list {
  height: 100%;
}
.list-item {
  text-decoration: none;
  display: inline-block;
  text-align: center;
  margin: 11px 9px 0 9px;
  position: relative;
}
li.list-item a {
  color: rgb(34, 33, 33);
  height: 50px;
}
.material-icons {
  vertical-align: -6px;
}
.up{
  display: none;
}
.submenu {
  background-color: darkolivegreen;
  position: absolute;
  width: 389px;
  max-height: 250px;
  top: 39px;
  left: 0px;
  display: none;
}
.submenu-item {
  text-align: left;
  margin: 9px;
  text-decoration: none;
}
.expand-less{
  position: absolute;
  width: 100%;
  height: 50px;
  top: 0;
  display: none;
}
.host:focus-within #host{
  display: block;
}
.host:focus-within .host-down{
  display: none;
}
.host:focus-within .host-up{
  display: inline-block;
}
.vps:focus-within #vps{
  display: block;
}
.vps:focus-within .vps-down{
  display: none;
}
.vps:focus-within .vps-up{
  display: inline-block;
}
.domain:focus-within #domain{
  display: block;
}
.domain:focus-within .domain-down{
  display: none;
}
.domain:focus-within .domain-up{
  display: inline-block;
}

ببخشید که کدها یکم نامرتب هستند.

در ضمن من از UI سایت Hostinger استفاده کردم.

با تشکر فراوان