Putting a box-shadow around parent div of a list

Question

I'm trying to put one continuous box shadow around the div with class "menu-item sub-menu", and all of its children. Right now it only seems to put the shadow behind the "About" item.

HTML code:

  <div class="menu">
      <ul>
        <div class="menu-item sub-menu">
          About
          <ul class="menu">
            <li class="menu-item">
              Web Design
            </li>
            <li class="menu-item">
              Web Development
            </li>
            <li class="menu-item">
              Illustrations
            </li>
          </ul>
        </div>
      </ul>  
    </div>

SCSS Code:

.menu {

 .sub-menu {
   box-shadow: -6px 6px 10px black;
   min-height: 100%;
 }

 .menu-item {
    color: white;
    font: bold 12px/18px sans-serif;
    display: inline-block;
    position: relative;
    padding: 15px 20px;
    cursor: pointer;
    background: purple;
   z-index: 1;

    .menu {
      padding: 0;
      position: absolute;
      top: 48px;
      left: 0;
      width: 150px;
      opacity: 1;
      visibility: visible;

      .menu-item {
        background: black; 
        display: block; 
        color: white;

        &:hover { 
          background: #666; 
        }
      }
    }
  }
}

Here's what I'm currently getting:

And here's what I'm trying to get:

Answer 1

Adding box-shadow to .menu will work,

I made a pen to test , check it out!