How to create CSS Buttons that appear on hover within a flex container?

I'm trying to put some buttons onto some flex containers for a sort of middle-of-the-page dropdown menu. I need four buttons that fill the space of the flex container, that appear on hover. I can get the hover action working, but my buttons don't show up and are a little off. I'm very new at this and have really hit a wall here.

Essentially, I need a box that splits into 4 other clickable boxes on hover, all contained inside the original box.

.nav-box-container {
  width: 220px;
  margin: 15px 7px 0px 7px;
  flex-grow: 1;
}

@media (max-width: 767px) {
  .nav-box-container {
    width: auto;
  }


  .nav-box-citations {
    color: #282828;
    background-color: #fff;
    outline: 3px solid #bbb;
    margin: 0px;
    padding: 25px 25px 30px 25px;
    padding-right: 19px;
    min-height: 160px;
    font-size: 17px;
    font-weight: 500;
    height: 100%;
  }

  .nav-box-citations-buttons {
    display: none;
    width: 100%;
    background-color: #fff;
    outline: #282828 solid;
    text-decoration: none;
  }

  .nav-box-citations:hover,
  .nav-box-citations:focus+.nav-box-citations-buttons,
  .nav-box-citations-buttons:hover {
    display: inline;
  }

     <div class="nav-box-container">
       <div class="nav-box-citations">
         <h3 class="nav-box-title">Citation Guides</h3>
         <p class="nav-box-desc">Get help on formatting citations and bibliographies.</p>
         <div class="btn-grp">
           <button type="button-group" class=nav-box-citations-buttons><a href="#">APA</a></button>
           <button type="button-group" class=nav-box-citations-buttons><a href="#">MLA</a></button>
           <button type="button-group" class=nav-box-citations-buttons><a href="#">AMA</a></button>
           <button type="button-group" class=nav-box-citations-buttons><a href="#">Chicago</a></button>
         </div>
       </div>
     </div>

Produces this:

Solution

The trick is to target just the children of the hovered parent:

  .nav-box-citations:hover .nav-box-citations-buttons {
    display: inline;
  }

  .nav-box-container {
  width: 220px;
  margin: 15px 7px 0px 7px;
  flex-grow: 1;
}

@media (max-width: 767px) {
  .nav-box-container {
    width: auto;
  }
  .nav-box-citations {
    color: #282828;
    background-color: #fff;
    outline: 3px solid #bbb;
    margin: 0px;
    padding: 25px 25px 30px 25px;
    padding-right: 19px;
    min-height: 160px;
    font-size: 17px;
    font-weight: 500;
    height: 100%;
  }
  .nav-box-citations-buttons {
    display: none;
    width: 100%;
    background-color: #fff;
    outline: #282828 solid;
    text-decoration: none;
  }
  .nav-box-citations:hover .nav-box-citations-buttons {
    display: inline;
  }

<div class="nav-box-container">
  <div class="nav-box-citations">
    <h3 class="nav-box-title">Citation Guides</h3>
    <p class="nav-box-desc">Get help on formatting citations and bibliographies.</p>
    <div class="btn-grp">
      <button type="button-group" class=nav-box-citations-buttons>
      <a href="#">APA</a>
      </button>
      <button type="button-group" class=nav-box-citations-buttons>
      <a href="#">MLA</a>
      </button>
      <button type="button-group" class=nav-box-citations-buttons>
      <a href="#">AMA</a>
      </button>
      <button type="button-group" class=nav-box-citations-buttons>
      <a href="#">Chicago</a>
      </button>
    </div>
  </div>
</div>