ul.menu{
  display: inline-block;
  border-bottom: 1px dashed white;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden; 
  font-family: 'Asap', sans-serif;
  font-size: 1em;
}
ul.menu li{
    float: right;
    background-color: #ff6a00; 
    border-right: 1px solid white;
}
ul.menu li:last-child{
    border-left: 1px solid white;
}
ul.menu a{
   text-decoration: none;
   display: block;
   text-align: center;
   color: white;
   padding: 20px; 
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0); 
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  /**/
}

ul.menu a:hover{  
   color: #ff6a00; 
}
ul.menu a::before{
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s; 
    -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
ul.menu a:hover:before{
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}
ul.menu li ul{
    display: none;
    position: absolute;
}
ul.menu li:hover ul{
    display:block; 
}
ul.menu  ul li{
   list-style-type: none;
   background-color: #f79313;
   border: 0px solid #ff6a00;
   border-bottom: 1px solid #ff6a00;
   float: none;
}

/* این منو برای داشبورد است*/
ul.menu2{
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden; 
  font-family: "Yekan";
  font-size: 1em;
  float: right;
  height: 60px;
}
ul.menu2 li{ 
    float: right;
    background-color: #ff6a00;
    border: 0px solid white; 
    border-right: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid rgba(255,255,255,0);
}
ul.menu2 a{
    text-decoration: none;
    display: block;
    text-align: center;
    color: white;
    padding: 20px;
}
ul.menu2 a:hover{
   background-color: white;
   color: #ff6a00;   
}
ul.menu2 li ul{
    display: none;
    position: absolute;
    list-style: none;
    
}
ul.menu2 li:hover ul{
    display:block; 
}
ul.menu2  ul li{  
   box-shadow: 0px 3px 3px gray;  
   float: left;
   position: relative;
   left: 0px;
   top: -1px;
   list-style-type: none;  
   background-color: white;
   border: 0px solid #ff6a00;
   border-bottom: 1px solid #ff6a00; 
   width:100%;
}
ul.menu2  ul li a{
    color: #ff6a00;
    width: auto;
}
ul.menu2  ul li a:hover{
   color: white;
   background-color: #ff6a00;
}
/* dropdown menu for mobile screen*/
.dropbtn {
    background-color: #ff6a00;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
   
}

.dropdownmenu {
    position: relative;
    display: inline-block;
    float: right;
    font-family: 'Asap', sans-serif;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0px;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover 
{
    background-color: #f1f1f1
    
}

.dropdownmenu:hover .dropdown-content {
    display: block;
}

.dropdownmenu:hover .dropbtn {
    background-color: white;
    color: #ff6a00;
}