在列表父母div周圍放置一個陰影框

我試圖在class「menu-item sub-menu」和它的所有孩子的div上放一個連續的盒子陰影。現在它似乎只是把「關於」項目背後的陰影。在列表父母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; 
     } 
     } 
    } 
    } 
}

這裏就是我目前得到：

what i am getting

這裏就是我試圖讓：

what i am going for

來源

2015-02-23 inyourcorner

你嘗試過加入'的box-shadow：-6px 6像素10px的black'到'。菜單，item'？它應該抓住他們全部 – maioman 2015-02-23 22:47:34

這張照片和我的描述可能不夠清楚。我正在尋找的是整個西部和南部邊界的連續陰影。 – inyourcorner 2015-02-23 22:54:18

當然會發生這種情況，因爲您已通過'position：absolute'使子菜單不能流動。如果你想保留這個（對於這種類型的菜單，你可能會這樣做），唯一的選擇就是對這個'ul'元素應用一個陰影。 – CBroe 2015-02-23 23:02:36

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

我發了筆測試，check it out!

來源

2015-02-23 23:04:02 maioman

這不是一個實際的解決方案，因爲影子不會在動態列表更新變化。 Fiddle

HTML：

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

CSS：

.menu { 
    span { 
     display: inline-block; 
     width:150px; 
     box-shadow: -6px 6px 10px black; 
     height:190px 
    } 
    .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; 
       } 
      } 
     } 
    } 
}

來源

2015-02-23 23:07:42 Litestone

在列表父母div周圍放置一個陰影框

回答

相關問題