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

结果如下：

所以我的问题是，如何隐藏 First Item 下的阴影并使下拉菜单看起来像一个单独的对象（未分开）？

修改： 这是显示下拉列表的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块内。当然，您希望下拉菜单绝对定位，以免影响页面上的其他元素（即按下正文）。

因此，最佳解决方案可能是重复下拉列表中的菜单文本，并将其绝对放置一行，以便覆盖原始菜单文本。这样，您可以将您想要的任何样式作为一个单元应用。