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

결과는 다음과 같습니다

그래서 내 질문입니다, 내가 첫 번째 항목 아래 그림자를 숨기고 드롭 다운 메뉴가 하나의 개체처럼 보이게 할 수있는 방법 (분리되지 않았다)?

편집 :

여기

<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

, 당신은 하나의 국경을 할 수 있습니다 : 여기에 드롭 다운을 표시하기 위해 HTML과 CSS의 메뉴 항목 텍스트와 밝혀진 메뉴 둘 다에 적용하십시오. 당신이 게시 한 jsfiddle의 주요 문제점은 .drop-down이 절대 위치를 가지므로 부모의 div 블록 안에 있지 않은 것 같습니다. 물론 드롭 다운 메뉴가 페이지의 다른 요소 (예 : 본문 텍스트)에 영향을 미치지 않도록 절대적으로 배치해야합니다.

그러므로 최상의 해결책은 메뉴 텍스트를 드롭 다운에 넣고 절대적으로 한 줄 위로 올려 원래 메뉴 텍스트를 덮을 수 있습니다. 그렇게하면 원하는 스타일링을 하나의 단위로 적용 할 수 있습니다.