Show on hover in nested div not working
<p>I am working on a menu that pops up at the right side of the screen.
<a href="https://jsfiddle.net/grhajrbp/" rel="nofollow noreferrer">https://jsfiddle.net/grhajrbp/</a></p>

<p>Html:</p>

<pre><code>  &lt;div id="east-exit"&gt;
    &lt;div id="mail-option"&gt;
      &lt;a ng-click="controller.openEmails()"&gt;&lt;i class="communicate-icon mail fa fa-envelope"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;a&gt;&lt;i class="new-mail fa fa-plus-circle"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;a&gt;&lt;i class="communicate-icon fa fa-comments"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;i class="east-exit-icon fa fa-arrow-right"&gt;&lt;/i&gt;
    &lt;a&gt;&lt;i class="communicate-icon fa fa-phone"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;a&gt;&lt;i class="communicate-icon fa fa-camera"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>html {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
}

#east-exit {
  display: flex;
  opacity: 1;
  z-index: -1;
  align-items: stretch;
  justify-content: space-around;
  flex-direction: column;
  position: absolute;
  right: 0;
  height: 100%;
  width: 85px;
  font-size: 55px;
}

#east-exit:hover .east-exit-icon {
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  -ms-transition: all .2s ease;
  transition: all .2s ease;
  opacity: 0;
}

#east-exit:hover .communicate-icon {
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
  opacity: 1;
}

#east-exit:hover,
#mail-option:hover,
.mail:hover .new-mail {
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
  opacity: 1;
}

.east-exit-icon {
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  -ms-transition: all .2s ease;
  transition: all .2s ease;
  font-size: 45px;
  opacity: 0.1;
}

.communicate-icon {
  z-index: 1;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
  color: darkgrey;
  opacity: 0;
}

.new-mail {
  z-index: 1;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
  color: darkgrey;
  opacity: 0;
}

.communicate-icon:hover,
.communicate-icon:focus,
.communicate-icon:active {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  color: grey;
  cursor: pointer;
}
</code></pre>

<p>The menu shows four buttons. If I were to hover over the mail button, a small plus button should present itself next to the mail button. I'm currently only trying to get the plus button to show on hover (it is not at the right place yet. I can't get the plus button to show on hover of the mail button. Does anyone know how to do this? </p>

<p>Moreover, I also tried to get the button at the right place with flexbox. (The images below show where it is supposed to go). I couldn't get this to work either. Does anyone have any suggestions I could try? First image:
<a href="https://i.stack.imgur.com/zoTxJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zoTxJ.png" alt="Closed east-menu"></a>
Second image:
<a href="https://i.stack.imgur.com/x9lvl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x9lvl.png" alt="Opened east-menu"></a>
Third image:
<a href="https://i.stack.imgur.com/Ex5mX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ex5mX.png" alt="This is where the plus button should go"></a></p>