在列表的父 div 周围放置一个框阴影

Question

我试图在 div 和 class "menu-item sub-menu" 及其所有子项周围放置一个连续的框阴影。现在它似乎只是把阴影放在 "About" 项目后面。

HTML代码：

  <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

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

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

<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>

在列表的父 div 周围放置一个框阴影

Putting a box-shadow around parent div of a list

css

box-shadow