CSS и откидное меню

@import url('https://fonts.googleapis.com/css2?family=Orelega+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
* {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
}

body {
  background: #111111;
  max-width: 2000px;
}

main {
  max-width: 100%;
  height: 60px;
  background: #111111;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 11;
}

.logo {
  float: left;
  font-size: 48px;
  margin: 4px 5px;
  font-weight: 500;
  color: #5a2e98;
  font-family: 'Orelega One', cursive;
}

.searchForm {
  float: left;
  margin: 12px;
  height: 25px;
}

.search {
  width: 235px;
  outline: none;
  height: 100%;
  background: #1c1c1c;
  ;
  border: none;
  padding: 7px;
  color: white;
  font-size: 20px;
  border-radius: 4px;
}

.random {
  float: left;
  margin: 20px 10px;
}

.random>a {
  color: #febb00;
  font-size: 20px;
  font-weight: 500;
  font-family: 'Orelega One', cursive;
}

.avatar {
  width: 40px;
  height: 40px;
  ;
  float: right;
  margin: 10px;
  background: #F0D8D8;
}

.menu {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  float: right;
  margin: 10px;
  position: relative;
  overflow: hidden;
}

.sub-sub-menu1, main:hover .sub-sub-menu1 {
  width: 50px;
  height: 7px;
  background: #5a2e98;
  position: absolute;
  top: 0px;
  transition: .5s;
  border-radius: 10px;
  left: -5px;
}

.sub-sub-menu2, main:hover .sub-sub-menu2 {
  width: 50px;
  height: 8px;
  background: #5a2e98;
  position: absolute;
  top: 16px;
  transition: .5s;
  border-radius: 10px;
  left: -5px;
}

.sub-sub-menu3, main:hover .sub-sub-menu3 {
  width: 50px;
  height: 7px;
  background: #5a2e98;
  position: absolute;
  top: 33px;
  transition: .5s;
  border-radius: 10px;
  left: -5px;
}

.menu:hover .sub-sub-menu1, .hover:hover .sub-sub-menu1 {
  transform: rotate(45deg);
  left: -22px;
  top: 20px;
  position: absolute;
  background: white;
}

.menu:hover .sub-sub-menu2, .hover:hover .sub-sub-menu2 {
  transform: rotate(90deg);
  left: -5px;
  bottom: 0px;
  background: white;
}

.menu:hover .sub-sub-menu3, .hover:hover .sub-sub-menu3 {
  transform: rotate(135deg);
  left: 12px;
  top: 20px;
  background: white;
}

.section-menu {
  width: 220px;
  height: 330px;
  position: absolute;
  right: 0;
  z-index: 15;
  background: #ffffff00;
  top: 40px;
  right: 10px;
  display: none;
}

.sub-section-menu {
  width: 210px;
  height: 300px;
  background: rgb(224, 134, 134);
  position: absolute;
  top: 20px;
  right: 0;
  border-radius: 10px;
  background: #5a2e98;
}

.sub-section-menu {
  display: flex;
  flex-direction: column;
}

.sub-section-menu>a {
  text-align: center;
  margin: 16px;
  color: white;
  font-size: 18px;
  font-family: 'Oswald', sans-serif;
}

.sub-section-menu>a:hover {
  background: #7555a1d0;
}

.menu:hover~.section-menu {
  display: block;
}

.section-menu:hover {
  display: block;
}

<main>
<section class="hover">
    <section class="menu">
    <section class="sub-sub-menu1"></section>
    <section class="sub-sub-menu2"></section>
    <section class="sub-sub-menu3"></section>
  </section>
  <section class="section-menu">
    <section class="sub-section-menu">
      <a href="#">Домашняя</a>
      <a href="#">Жанры</a>
      <a href="#">Аниме</a>
      <a href="#">Онгоинг</a>
      <a href="#">Топ - 100</a>
    </section>
  </section>
</section>
</main>