0

我正在尝试在具有“菜单项子菜单”类及其所有子项的 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; 
        }
      }
    }
  }
}

这是我目前得到的：

我得到了什么

这就是我想要得到的：

我要做什么

4

2 回答 2

2

添加box-shadow到.menu将工作，

我做了一支笔来测试，看看吧！

于 2015-02-23T23:04:02.607 回答
1

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

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

于 2015-02-23T23:07:42.720 回答