How do I push a fixed child element behind an ancestor fixed child element?

Question

I'm creating a fixed position side menu that moves the main content to the right when it opens. This menu also has secondary (child) menus that are not direct child elements.

Currently I have this working where I shrink the width of the secondary menus, but this has undesirable effects on the content inside the secondary menu where flex is used.

I'd like to keep the width of the secondary menu static and instead slide the menu away and behind the primary menu. So far I have tried using z-index and transform without much success.

https://codepen.io/Maynards/pen/PoOxrXO

<div class="primaryMenu push">
  <ul class="primaryMenuItems">
    <li class="primaryMenuItem">
      <div class="primaryMenuItemSelector">
        <div>1</div>
        <div class="primaryMenuItemExtra">Hidden Primary Menu Content</div>
      </div>
      <div class="secondaryMenu push">
        <div>Sub Menu 1</div>
      </div>
    </li>
    <li class="primaryMenuItem">
      <div class="primaryMenuItemSelector">
        <div>2</div>
        <div class="primaryMenuItemExtra">Hidden Primary Menu Content</div>
      </div>
      <div class="secondaryMenu inactive">
        <div>Sub Menu 2</div>
      </div>
    </li>
  </ul>
</div>
<div class="mainContent">
  <p>Main Content - pushed right when primary or secondary menu is open</p>
  <p>Primary menu expands and hides any open secondary menu</p>
  <p>Secondary menu opens and collapses primary menu</p>
</div>

body {
  padding: 0;
  margin: 0;
}
.mainContent {
  margin-left: 288px;
  padding: 16px;
}
.primaryMenu {
  height: 100%;
  width: 56px;
  position: fixed;
  top: 0px;
  left 0px;
  background-color: #333333;
  white-space: nowrap;
}
.primaryMenuItems {
  color: #FFFFFF;
  padding: 0;
  margin: 0;
  list-style-type: none;
  margin-left: 16px;
  margin-top: 16px;
}
.primaryMenuItems > li {
  margin-bottom: 16px;
}
.primaryMenuItemSelector {
  display: flex;
}
.primaryMenuItemExtra {
  margin-left: 36px;
}

.secondaryMenu {
  width: 232px;
  height: 100%;
  position: fixed;
  box-sizing: border-box;
  top: 0;
  left: 56px;
  background-color: #777777;
  overflow-x: hidden;
  color: white;
  padding: 16px;
}
.secondaryMenu.inactive {
    display: none;
}

/* Attempt to push secondary menu under primary when hiding */
.primaryMenu.push {
  transform-style: preserve-3d;
}
.secondaryMenu.push {
  transform: translateX(-30px) translateZ(-10px);
}