<div class="flex">
  <div class="icon"></div>
  <ul class="menu">
    <li><a href="">О нас</a></li>
    <li><a href="">Тарифы</a></li>
    <li><a href="">Психологам</a></li>
    <li class="open"><span>Материалы</span></li>
    <ol class="hide">
      <li><a href="">Блог</a></li>
      <li><a href="">Вебинары</a></li>
    </ol>
  </ul>
  <a href="" class="cabinet">Личный кабинет</a>
</div>

* {
  text-decoration: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

ul a,
span,
ol {
  font-family: sans-serif;
  color: #000;
  cursor: pointer;
}

ul {
  position: relative;
  display: flex;
  gap: 20px;
}

ol {
  position: absolute;
  right: 0;
  top: 100%;
  padding-right: 9px;
  padding-top: 6px;
  visibility: hidden;
}

li {
  padding: 3px 5px;
  border-radius: 4px;
}

ul p {
  margin: 0;
}

ul a:hover,
ul span:hover,
ol li a:hover {
  color: #7872b9;
}

li:hover {
  background: rgba(200, 200, 200, 0.2);
}

li p {
  position: absolute;
}

li p a {
  display: block;
}

.cabinet {
  font-family: sans-serif;
  color: #7872b9;
  border: 1px solid #7872b9;
  border-radius: 6px;
  padding: 10px 20px;
}

.cabinet:hover {
  transform: scale(1.01) translateY(10px);
}

.icon {
  width: 150px;
}

.icon:hover {
  transform: scale(1.01);
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 20px;
  max-width: 776px;
  margin: auto;
}

.menu,
.cabinet {
  transform: translateY(10px);
}

@media (max-width: 776px) {
  a {
    font-size: 14px;
  }

  .flex {
    padding: 4px 10px;
  }

  ol li {
    padding-right: 11px;
  }

  .cabinet {
    padding: 8px 14px;
  }

  .menu {
    margin: 0 6px;
  }
}

let icon = `<svg  viewBox="34.1 10.5 42.07 11.67418" xmlns="http://www.w3.org/2000/svg">
 <g fill="#7872b9">
      <path d="m 72.675489,21.376867 c -0.27754,-0.306676 -0.42193,-0.863285 -0.48284,-1.86139 -0.0934,-1.530392 -0.29079,-1.955715 -0.90758,-1.955715 -0.60231,0 -0.83235,0.672249 -0.83235,2.432413 v 1.609463 h -0.6382 -0.63819 v -1.609463 c 0,-1.760164 -0.23004,-2.432413 -0.83235,-2.432413 -0.6539,0 -0.84718,0.475027 -0.91295,2.243748 -0.0621,1.669664 -0.0705,1.692642 -0.64791,1.759075 l -0.58501,0.06731 v -2.673259 -2.673259 h 0.55174 c 0.37284,0 0.58782,0.137959 0.663,0.42546 0.13769,0.526521 0.17331,0.526521 0.69983,0 0.5818,-0.581794 1.24657,-0.533621 1.95113,0.14139 l 0.59167,0.566851 0.44588,-0.566851 c 0.59745,-0.759531 1.50679,-0.762273 2.10141,-0.0063 0.33776,0.429392 0.4409,0.86732 0.4409,1.872027 0,1.202249 0.23157,1.822066 0.68074,1.822066 0.0936,0 0.17018,-0.526507 0.17018,-1.170017 v -1.170016 h 0.74456 c 0.63169,0 0.74385,0.07255 0.73988,0.478643 -0.007,0.755219 -0.73708,2.170097 -1.38004,2.675849 -0.73726,0.57993 -1.41301,0.588509 -1.9235,0.02442 z m 2.07438,-3.859651 c -0.48993,-0.48993 -0.14828,-1.446567 0.51663,-1.446567 0.29858,0 0.92993,0.577709 0.92993,0.850922 0,0.273212 -0.63135,0.850921 -0.92993,0.850921 -0.14375,0 -0.37623,-0.114874 -0.51663,-0.255276 z" />
      <path
         d="m 33.969477,21.955512 c -0.219548,-0.572134 0.0751,-3.364022 0.449664,-4.260683 0.411595,-0.985313 1.2434,-1.912311 2.135418,-2.379796 0.823514,-0.431584 2.792901,-0.431584 3.616415,0 1.129818,0.59211 2.446399,2.337619 2.446399,3.243409 0,0.441891 1.004798,1.445125 1.278164,1.276175 0.117651,-0.07271 0.210948,-1.112731 0.210948,-2.351487 v -2.221114 h 1.489112 c 1.683824,0 1.646679,-0.05614 1.171029,1.770002 -0.893067,3.428721 -3.231715,5.696139 -5.176003,5.018356 -0.770373,-0.268553 -1.405469,-1.199689 -1.858289,-2.7245 -0.420573,-1.416224 -1.220249,-1.871141 -2.126647,-1.2098 -0.338056,0.246658 -0.432225,0.642062 -0.519303,2.180486 l -0.106365,1.879192 -1.43885,0.06297 c -1.171114,0.05125 -1.46357,-0.0014 -1.571692,-0.28321 z m 3.213603,-8.279304 c -0.768804,-0.768804 -0.71349,-1.83179 0.132357,-2.543523 0.359982,-0.302905 0.83128,-0.550736 1.047329,-0.550736 0.21605,0 0.687348,0.247831 1.04733,0.550736 0.498407,0.419382 0.654513,0.726114 0.654513,1.286052 0,0.954806 -0.788769,1.779628 -1.701843,1.779628 -0.414478,0 -0.850542,-0.193012 -1.179686,-0.522157 z m 7.232832,0 c -1.318741,-1.318739 0.0497,-3.466041 1.816372,-2.850176 1.744376,0.608093 1.222495,3.372333 -0.636687,3.372333 -0.414477,0 -0.850543,-0.193012 -1.179685,-0.522157 z"  />
      <path
         d="m 50.884579,20.905918 c 0,-0.652852 -0.113943,-0.920675 -0.499038,-1.173 -0.64884,-0.425136 -0.990074,-1.199093 -0.990074,-2.245599 0,-0.783236 0.0417,-0.840912 0.607966,-0.840912 0.543515,0 0.628184,0.09584 0.798689,0.904104 0.162684,0.771174 0.268779,0.904104 0.721599,0.904104 0.472478,0 0.538071,-0.09945 0.596289,-0.904104 0.06106,-0.843993 0.107031,-0.904104 0.691374,-0.904104 0.610595,0 0.625959,0.02651 0.625959,1.080016 0,0.916376 -0.0967,1.176711 -0.638191,1.718206 -0.492201,0.4922 -0.638191,0.829103 -0.638191,1.472749 0,0.785465 -0.03754,0.834557 -0.638191,0.834557 -0.602121,0 -0.638191,-0.04782 -0.638191,-0.846017 z" />
      <path
         d="m 55.454352,21.72217 c -1.444865,-0.583791 -1.879864,-3.030938 -0.761305,-4.282823 0.479403,-0.536546 0.807493,-0.689042 1.658326,-0.770797 0.91841,-0.08825 1.15021,-0.02658 1.728193,0.459753 1.368178,1.151253 1.38557,3.120576 0.0375,4.254854 -0.676902,0.569581 -1.753022,0.706588 -2.662763,0.339013 z m 1.832011,-1.493354 c 1.129311,-1.129309 -0.34437,-2.844188 -1.525548,-1.775237 -0.213966,0.193635 -0.389028,0.57655 -0.389028,0.850921 0,0.560531 0.684136,1.349777 1.170016,1.349777 0.1755,0 0.51055,-0.191457 0.74456,-0.425461 z" />
      <path
         d="m 60.75095,21.340581 c -0.60071,-0.60071 -0.621832,-0.691016 -0.621832,-2.65913 v -2.037302 h 0.638191 0.638188 v 1.609463 c 0,1.74633 0.230121,2.432413 0.815861,2.432413 0.707263,0 0.885981,-0.459176 0.885981,-2.276214 v -1.765662 h 0.744562 0.744558 v 1.708675 c 0,2.739846 -0.564409,3.609584 -2.342411,3.609584 -0.690399,0 -1.015961,-0.134682 -1.503098,-0.621827 z" />
    </g>
</svg>`;

document.querySelector(".icon").innerHTML = icon;

let open = document.querySelector(".open"),
  hide = document.querySelector(".hide");

open.onmouseenter = function () {
  hide.style = "visibility: visible";
};

hide.onmouseleave = function () {
  hide.style = "visibility: hidden";
};