CSS：隱藏在我的網頁陰影

Question

的部分我有一個CSS菜單。當我將鼠標懸停在項目上時，會出現它們的下拉菜單。我用一些CSS陰影這樣的：

#menu li:hover 
{ 
    //... 
    -moz-box-shadow: -2px 0px 5px #000; 
    -webkit-box-shadow: -2px 0px 5px #000; 
    box-shadow: -2px 0px 5px #000; 
} 

也是我下拉類，我用一些陰影：

.drop-down 
{ 
    //... 
    display:none; 
    -moz-box-shadow: -2px 2px 5px #000; 
    -webkit-box-shadow: -2px 2px 5px #000; 
    box-shadow: -2px 2px 5px #000; 
} 

的結果是這樣的：

所以我的問題是，我怎麼能隱藏第一項下的陰影，並使下拉菜單看起來像一個單一的對象（不分開）？

編輯：這裏 是在HTML和CSS來顯示下拉：

<ul id="menu"> 
    <li><a href="#">First Item</a> 
    <div class="drop-down"> 
     <div> 
      ...</div> 
    </div> 
    </li> 
</ul> 

#menu li:hover .drop-down 
{ 
    left: -1px; 
    display: block; 
    top: auto; 
} 

這裏是一個simple version of that in jsfiddle.net

Answer 1

如果我理解正確的話，你希望有一個單一的邊界圍繞菜單項文本和顯示的菜單應用。這個在你張貼的jsfiddle的主要問題似乎是.drop-down具有絕對的位置，是不是其父的div塊內。當然，您希望將下拉菜單放在絕對位置，以便它們不會影響頁面上的其他元素（即按下正文文本）。

因此，最好的解決方案可能是重複菜單文本里面的下拉菜單，並絕對將其放在一行中，因此它覆蓋了原始菜單文本。這樣，你可以將任何你想要的樣式作爲一個單位來應用。