HTML/CSS: Submenu within Menu. One of the buttons should trigger a similar event as the main menu

Question

I am trying to create a submenu within a menu, however with a bit more complicated design. Everywhere I find suggestions to use <LI> </LI>, but somehow I don't get it to work. Here a picture of the current design including the expected result:

I've included my CSS/HTML code down below.

So far I assume I have to build another part of the tree within the third href. Basically replacing the third href with the following:

  <a href="#" class="menu-item"> 
    <nav class="menu-2">
      <input type="checkbox" href="#" class="menu-open-2" name="menu-open-2" id="menu-open-2"/>
      <a href="#submenulinks1" target="_parent" class="menu-item-2"> </a>
      <a href="#submenulinks2" target="_parent" class="menu-item-2"> </a>
      <a href="#submenulinks3" target="_parent" class="menu-item-2"> </a>      
    </nav>  
  </a>

However simply doing that messes up the entire design, nor will the original still function the same. Simply renaming CSS parts with '-2' and mess with the coordinates for the submenu menu-items won't do.

  @import "compass/css3";
 body {
     background: transparent;
     color: white;
     text-align: center;
}
 a {
     color: inherit;
}
  .menu-item .fa {
    padding-top: 30px!important;
  }
  .menu-item .fa-cog {
    display: none!important;
  }
  .menu {
     filter: url('#shadowed-goo');
}
 .menu-item, .menu-open-button {
     background: #53C4C9;
     border-radius: 100%;
     width: 80px;
     height: 80px;
     margin-left: 0px;
     position: absolute;
     top: 20px;
     color: white;
     text-align: center; //center
     //line-height: 80px!important; //negeert hij als ik m ctrl-c naar HTML blokje
     transform: translate3d(0, 0, 0);
     transition: transform ease-out 200ms;
}
 .menu-open {
     display: none;
}
 .hamburger {
     width: 25px;
     height: 3px;
     background: white;
     display: block;
     position: absolute;
     top: 50%;
     left: 50%;
     margin-left: -12.5px;
     margin-top: -1.5px;
     transition: transform 200ms;
}
 .hamburger-1 {
     transform: translate3d(0, -8px, 0);
}
 .hamburger-2 {
     transform: translate3d(0, 0, 0);
}
 .hamburger-3 {
     transform: translate3d(0, 8px, 0);
}
 .menu-open:checked + .menu-open-button .hamburger-1 {
     transform: translate3d(0, 0, 0) rotate(45deg);
}
 .menu-open:checked + .menu-open-button .hamburger-2 {
     transform: translate3d(0, 0, 0) scale(0.1, 1);
}
 .menu-open:checked + .menu-open-button .hamburger-3 {
     transform: translate3d(0, 0, 0) rotate(-45deg);
}
 .menu {
     position: absolute;
     left: 0%;
     margin-left: 0px;
     padding-top: 0px;
     padding-left: 1%;
     width: 650px;
     height: 150px;
     box-sizing: border-box;
     font-size: 20px;
     text-align: left;
}
 .menu-item:hover {
     background: black;
     color: #53C4C9;
}
 .menu-item:nth-child(3) {
     transition-duration: 180ms;
}
 .menu-item:nth-child(4) {
     transition-duration: 180ms;
}
 .menu-item:nth-child(5) {
     transition-duration: 180ms;
}
 .menu-item:nth-child(6) {
     transition-duration: 180ms;
}
 .menu-open-button {
     z-index: 2;
     transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
     transition-duration: 400ms;
     transform: scale(1.1, 1.1) translate3d(0, 0, 0);
     cursor: pointer;
}
 .menu-open-button:hover {
     transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
 .menu-open:checked + .menu-open-button {
     transition-timing-function: linear;
     transition-duration: 200ms;
     transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
 .menu-open:checked ~ .menu-item {
     transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
 .menu-open:checked ~ .menu-item:nth-child(3) {
     transition-duration: 190ms;
     transform: translate3d(0, 90px, 0);
}
 .menu-open:checked ~ .menu-item:nth-child(4) {
     transition-duration: 290ms;
     transform: translate3d(0, 190px, 0);
}
 .menu-open:checked ~ .menu-item:nth-child(5) {
     transition-duration: 390ms;
     transform: translate3d(0, 290px, 0);
}
 .menu-open:checked ~ .menu-item:nth-child(6) {
     transition-duration: 490ms;
     transform: translate3d(0, 390px, 0);
}
 

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<nav class="menu">
  <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
  <label class="menu-open-button" for="menu-open">
    <span class="hamburger hamburger-1"></span>
    <span class="hamburger hamburger-2"></span>
    <span class="hamburger hamburger-3"></span>
  </label>
  <a href="https://www.cyantist.nl/" target="_parent" class="menu-item"> <i class="fa fa-bar-chart"></i> </a>
  <a href="#" target="_parent" class="menu-item"> </a>
  <a href="#" target="_parent" class="menu-item"> <i class="fa fa-music"></i> </a>
  <a href="#" target="_parent" class="menu-item"> <i class="fa fa-envelope"></i> </a>
</nav>

<!-- filters -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <filter id="shadowed-goo">
          
          <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
          <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
          <feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
          <feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 -0.2" result="shadow" />
          <feOffset in="shadow" dx="1" dy="1" result="shadow" />
          <feComposite in2="shadow" in="goo" result="goo" />
          <feComposite in2="goo" in="SourceGraphic" result="mix" />
      </filter>
      <filter id="goo">
          <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
          <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
          <feComposite in2="goo" in="SourceGraphic" result="mix" />
      </filter>
    </defs>
</svg>

<style>
 
  
</style>

Any suggestions what I am missing here?

Answer 1

The following styles have been added

.submenu-item {
            right: 0;
            display: none;
        }

        .menu-item:hover .submenu-item {
            display: block;
            right: -92px;
            transition-property: margin-left;
            transition-duration: 9s;
        }

        .submenu-item {
            background: #53C4C9;
            border-radius: 100%;
            width: 80px;
            height: 80px;
            margin-left: 98px;
            position: absolute;
            top: 0;
            /* left: 98px; */
            color: white;
            text-align: center;
            line-height: 80px !important;
            transform: translate3d(0, 0, 0);
            transition: transform ease-out 200ms;

        }

As well as the following html:

<a href="#" target="_parent" class="menu-item">
            <div target="_parent" class="submenu-item">submenu</div>
        </a>