Sous sous menu en css qui s'affichent ensemble

Bonjour,

J'ai beau tourné le code dans tous les sens je n'y parviens pas. Je vous met le code.

Lorsque je passe sur réalisations puis paceX ou codeur.com, les deux sous menus apparaissent ensemble.

J'aimerais qu'ils apparaissent indépendament.

Merci d'avance pour votre aide.

code html:

<nav>
  <ul>
    <li class="menu-deroulant">
      <a href="#">Services</a>
        <ul class="sous-menu">
          <li><a href="#">Graphisme</a></li>
          <li><a href="#">Web & App</a></li>
          <li><a href="#">Marketing</a></li>
        </ul>
      </li>
    <li class="menu-deroulant">
      <a href="#">Réalisations</a>
        <ul class="sous-menu">
          <li><a href="#">SpaceX</a></li>
            <ul id="ss-menu1">
              <li><a href="#">Web & App</a></li>
              <li><a href="#">Marketing</a></li>
              <li><a href="#">Marketing22</a></li>
              <li><a href="#">Marketing22</a></li>
            </ul>
          <li><a href="#">Codeur.com</a></li>
            <ul id="ss-menu2">
              <li><a href="#">Web22 & App</a></li>
              <li><a href="#">Marketing22</a></li>
              <li><a href="#">Marketing22</a></li>
              <li><a href="#">Marketing22</a></li>
              <li><a href="#">Marketing22</a></li>
            </ul>
          </ul>
      </li> 
    <li><a href="#">À propos</a></li>
</nav>

code css:

:root{
  --hauteur-menu: 60px;
  --largeur-menu: 10px;
}

* {
  margin: 0px;
  padding: 0px;
  font-family: Montserrat, sans-serif;
}

nav {
  width: 100%;
  font-size: 18px;
  position: sticky;
  top: 0;
}

nav > ul {
  display: flex;
  text-align: center;
  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.3);
  height: var(--hauteur-menu);
}

nav ul {
  list-style-type: none;
}

nav > ul > li {
  background-color: white;
  position: relative;
  height: 100%;
  flex: 2;
}

nav > ul > li:hover > a{
  color: #2169EC;
}

nav > ul > li > a {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, 50%);
}

li a {
  text-decoration: none;
  color: black;
}

.menu-deroulant > a:after{
  content: '❯';
  font-size: 15px;
  margin-left: 7px;
  display: inline-block;
}

.menu-deroulant:hover > a:after{
  animation: rotationFleche 0.2s linear forwards;
}

@keyframes rotationFleche {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(45deg);
  }
  100%{
    transform: rotate(90deg);
  }
}

.sous-menu {
  margin-top: var(--hauteur-menu);
  width: 99.9%;
  overflow: hidden;
  max-height: 0;
  border-radius: 2px;
  background-color: white;
}

.menu-deroulant:hover > .sous-menu {
  animation: apparitionSousMenu 2s forwards;
}

@keyframes apparitionSousMenu {
  0% {
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0);
    border-top: 3px solid #2169EC;
  }
  30% {
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
  }
  100% {
    max-height: 50em;
    border-top: 3px solid #2169EC;
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
  }
}

.sous-menu > li:hover {
  background-color: rgba(33, 105, 236, 0.3);
}

.sous-menu > li > a {
  align-items: center;
  display: flex;
  height: 50px;
  padding-left: 20px;
}

.sous-menu > li:hover > a {
  color: white;
}
#ss-menu1 > li > a {
  align-items: center;
  display: flex;
  height: 50px;
  padding-left: 20px;
  width: 100%;
}

#ss-menu1 {
  width: 25%;
  overflow: hidden;
  max-height: 0;
  border-radius: 2px;
  background-color: white;
  position: absolute;
  top: 100%;
  right: 100%
}
 
.sous-menu:hover > #ss-menu1 {
  animation: apparitionSsMenu1 1s forwards;
}

@keyframes apparitionSsMenu1 {
  0% {
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0);
    border-top: 3px solid #2169EC;
  }
  30% {
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
  }
  100% {
    max-height: 50em;
    border-top: 3px solid #2169EC;
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
  }
}

#ss-menu2 > li > a {
  align-items: center;
  display: flex;
  height: 50px;
  padding-left: 20px;
  width: 100%;
}

#ss-menu2 {
  width: 25%;
  text-align:center;
  overflow: hidden;
  max-height: 0;
  border-radius: 2px;
  background-color: white;
  position: absolute;
  left: 100%;
  top: 100%;
}
.sous-menu:hover > #ss-menu2 {
  animation: apparitionSsMenu2 5s forwards;
  display : visible;
}
@keyframes apparitionSsMenu2 {
  0% {
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0);
    border-top: 3px solid #2169EC;
  }
  30% {
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
  }
  100% {
    max-height: 50em;
    border-top: 3px solid #2169EC;
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
  }
}

#ss-menu1 > li:hover {
  background-color: rgba(33, 105, 236, 0.3);
}
#ss-menu2 > li:hover {
  background-color: rgba(33, 105, 236, 0.3);
}

#ss-menu1 > li:hover > a {
  color: white;
}
#ss-menu2 > li:hover > a {
  color: white;
}