在列表的父div周围放置一个box-shadow

Question

我试图用div＆＃34; menu-item子菜单＆＃34;及其所有孩子在div周围放置一个连续的盒子阴影。现在它似乎只把阴影置于＆＃34;关于＆＃34;项目

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代码：

.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; 
        }
      }
    }
  }
}

这是我目前得到的：

这就是我想要得到的东西：

Answer 1

将box-shadow添加到.menu即可，

我做了笔来测试，check it out!

Answer 2

这不是一个实际的解决方案，因为在列表更新时不会动态更改阴影。

＆＃13;

＆＃13;

.menu span {
  display: inline-block;
  width: 150px;
  box-shadow: -6px 6px 10px black;
  height: 190px;
}

.menu .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 .menu-item .menu {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  opacity: 1;
  visibility: visible;
}

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

.menu .menu-item .menu .menu-item:hover {
  background: #666;
}

＆＃13;

<div class="menu">
  <ul>
    <span>
      <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>
    </span>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;