ایجاد شده در ۲۱ آذر ۱۴۰۰
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;
}
