Question

I have a CSS menu in my page. When I hover the mouse over the items, their drop-down menu appears. I’ve used some css shadows like this:

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

also in my drop-down class, I’ve used some shadows:

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

the result looks like this:

So my question is, how can I hide the shadow under First Item and make the drop-down and menu look like one single object (not separated)?

EDIT:
here’s the html and the css to show the drop-down:

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

here is a simple version of that in jsfiddle.net

Answer 1

If I’ve understood correctly, you want a single border to apply around both the menu item text and the revealed menu. The main problem with this in the jsfiddle you posted seems to be that .drop-down has an absolute position so is not inside its parent’s div block. Of course, you want the drop-down menus to be absolutely positioned so they don’t affect the other elements on the page (i.e. pushing down the body text).

Therefore, the best solution might be to repeat the menu text inside the drop-down, and absolutely position it up one line so it covers the original menu text. That way, you can apply whatever styling you want to it as a unit.