0

クラス「メニュー項目サブメニュー」とそのすべての子を使用して、divの周りに1つの連続したボックスシャドウを配置しようとしています。現在、「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; 
        }
      }
    }
  }
}

これが私が現在得ているものです：

私が得ているもの

そして、ここに私が取得しようとしているものがあります:

私は何のために行くのですか

4

2 に答える 2

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 に答える