تمرین مینی پروژه بنده

html tags :

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>wellcometitle>
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
  <head>
  <body>
    <nav class="test">
      <ul class="test-1">
        <li class="has-sub-menu"><a href="#"><i class="material-icons">view_headlinei>دسته بندیa>
          <ul class="sub-menu">
            <li><a href="#"><i class="material-icons">health_and_safetyi>زیبایی و سلامتa>li>
            <li><a href="#"><i class="material-icons">checkroomi>پوشاکa>li>
            <li><a href="#"><i class="material-icons">emoji_eventsi>ورزشa>li>
            <li><a href="#"><i class="material-icons">menu_booki>کتابa>li>
            <li class="has-sub-menu-1"><a href="#"><i class="material-icons">chairi>خانه و اشپزخانهa>
              <ul class="sub-menu-1">
                <li><a href="#">اتاقa>li>
                <li><a href="#">پذیراییa>li>
                <li><a href="#">آشپزخانهa>li>
              ul>
            li>
            <li><a href="#"><i class="material-icons">handymani>ابزار الاتa>li>
          ul>
        li>
        <li class="contact"><a href="#"><i class="material-icons">calli>ارتباطa>
          <ul class="sub-menu-2">
            <li><a href="#">ادرسa>li>
            <li><a href="#">شماره تللفنa>li>
          ul>
        <li>
        <li><a href="#"><i class="material-icons">groupsi>انجمنa>li>
        <li><a href="#"><i class="material-icons">support_agenti>پشتیبانیa>li>
      ul>
    nav>
  body>
html>

css style :

@font-face {
  font-family: vazir-m;
  src: url("fonts/Vazir-Medium.eot") format("eot"),
    url("fonts/Vazir-Medium.woff") format("woff"),
    url("fonts/Vazir-Medium.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  direction: rtl;
  font-family: vazir-m;
}
a {
  text-decoration: none;
  color: rgb(143, 88, 88);
}
i {
  vertical-align: middle;
  margin-left: 10px;
}
ul,
li {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.test {
  background-color: gainsboro;
  padding: 10px;
  font-size: 16px;
}
.test-1 li {
  display: inline;
  margin: 0 10px;
  padding: 10px;
}
.test-1 li:hover {
  background-color: rgb(197, 220, 252);
  border-bottom: 2px solid rgb(106, 152, 238);
}
.test-1 li:active{
   background-color: rgb(144, 190, 255);
}
/* sub-menu */
.has-sub-menu {
  position: relative;
}
.sub-menu li {
  display: block;
}
.sub-menu{
  position: absolute;
  background-color: gainsboro;
  top: 46px;
  right: -10px;
  min-width: 165px;
  white-space:nowrap;
  display: none;
  box-shadow:0px 2px 6px #ababab;
  border-radius:0 0 15px 15px ;
}
.has-sub-menu:hover .sub-menu{
  display: block;
}
/* sub-menu-1 */
.has-sub-menu-1 {
  position: relative;
}
.sub-menu-1 li {
  display: block;
}
.sub-menu-1{
  position: absolute;
  background-color: gainsboro;
  top: 13px;
  right: 166px;
  min-width: 110px;
  white-space:nowrap;
  display: none;
  box-shadow:0px 2px 6px #ababab;
  border-radius:15px 0 15px 15px ;
}
.has-sub-menu-1:hover .sub-menu-1{
  display: block;
}
/* sub-menu-2 */
.contact {
  position: relative;
}
.sub-menu-2 li {
  display: block;
}
.sub-menu-2{
  position: absolute;
  background-color: gainsboro;
  text-align: center;
  top: 46px;
  right: 1px;
  min-width: 110px;
  white-space:nowrap;
  display: none;
  box-shadow:0px 2px 6px #ababab;
  border-radius:0px 0 15px 15px ;
}
.contact:active .sub-menu-2{
  display: block;
}