.ad-menu *:focus,.ad-menu *::before,.ad-menu *::after {
  margin: 0;
  outline: none;
  box-sizing: content-box; /*это свойство обязательно*/
}

.nav {margin: 0; padding: 0;}

.ad-menu{
margin: 0; 
padding-bottom: 10px;
} 

@media screen and (min-width: 890px) {
    
.ad-menu{position:fixed; top:12px; right:10px;z-index: 1;}
    
.ad-menu ul{font-size:0;}
.ad-menu ul li {font-size:16px; }
    


.ad-menu li {
  display: inline-block;
  font-size: 1.4em;
  text-align: center;
  width: 120px;
  font-weight: 600;
  outline: none;
  }

.ad-menu li a {
  display: block;
  text-decoration: none;
  color: #000;
  color:#bbbbbb;
}

#menu248 a {
margin-left: 30px;
color: #09f;
}

.ad-menu li a:hover {
color: #FF8C00;
}

#menu248 a:hover {
color: #FF8C00;
}

}
  
/*поведения и структура при экране менее 680 пикселей*/
@media screen and (max-width: 890px) {
    
.ad-menu ul{font-size:0;}
.ad-menu ul li {font-size:16px;}

.ad-menu {
    position:fixed;
    top: 0;
    right: 0;
    height: 100%;
    background-color:#f8f8f8;
    z-index:2;
    }

.ad-menu li {
    text-align:left;
    display: block;
    width: 100%;
    border-bottom: 1px solid #d5d9dc;
    font-weight: 600;
    margin:0;
    }
    
.ad-menu li a {
  display: block;
  text-decoration: none;
  color: #000;
  border:none;
  padding: 20px 150px 20px 10px;
  margin:0;
  }

#menu247 a {
color: #FF8C00;
}

#menu248 a {
color: #09f;
}

.ad-menu ul {
  display: none;
  }

.ad-menu nav::before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  cursor: pointer;
  height: 24px;
  width: 24px;
}

.ad-menu::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAwCAMAAAA8VkqRAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAAE5JREFUeAFjwAkYcQC6SFAKBt4fo/6AaMMUQTUQIYJpFaqrMIICzkATR2Hi5uDUjmkh7tDAHUq4Qw8ujl+CsFEEHDVowg1n1OJKDLiTDwBLrgJ9vkuXOwAAAABJRU5ErkJggg==);
  cursor: pointer;
  height: 24px;
  width: 24px;
}
.ad-menu nav::before{
  background-color:#303b44;
  border: 9px solid #303b44;
  }
  
.ad-menu::after {
  background-color:#f8f8f8;
  border: 9px solid #f8f8f8;
  background-position: -24px -24px;
  }
  
.ad-menu::after {
  top: 0;
  right: 0;
  background-position: -24px -24px;
  z-index: 1;
}
.ad-menu nav::before {
  z-index: 3;
}
.ad-menu nav:focus::before {
  z-index: 1;
    }
  
.ad-menu nav:focus ul,
.ad-menu ul:hover { /*решаем проблему со скликиванием*/
  display: block;
  }
}