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

Question

我试图在类为“menu-item sub-menu”的 div 及其所有子项周围放置一个连续的框阴影。现在它似乎只是把阴影放在“关于”项后面。

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!