전체 하위 탐색 메뉴와 함께 기본 탐색 링크 주위에 한 픽셀 드롭 그림자를 추가하는 방법은 무엇입니까?

Question

내 메인 탐색 링크와 함께 드롭 다운 메뉴를 사용하고 모든 항목 (현재 탐색 버튼/링크 (경계선 반경을 사용하여 모서리가 둥글게))과 전체 하위 탐색 요소 그 아래로 떨어지는).

나는 JSFiddle에의 데모를 게시 한 :

이

http://jsfiddle.net/thebluehorse/TFqjR/2/

누군가가 탐색을 통해 hoving 때 모든 주위에 하나 개의 픽셀의 그림자를 만들기 위해 무엇을 나에게 또는 업데이트 할 수 링크? 주 탐색에서 둥근 모서리를 돌아 다닐 필요가 있음에 유의하십시오. 그것은 IE7 +를 지원할 필요가 있지만 상자 그림자가 CSS3 파이가 도우미로 사용될 수 있다면 사용되는 것 같습니다.

도움을 주시면 감사하겠습니다. 이 일로 인해 나를 미치게 만들었 어.

Answer 1

목표를 달성하는 데는 여러 가지 방법이 있습니다. 가장 간단한 방법은 중첩 된 ul 요소에 정적 클래스를 설정하는 것입니다. 이것은 부모의 호버 이벤트에 의해 트리거 될 때만 볼 수 있기 때문입니다. 예 : http://jsfiddle.net/deloretta/gspnK/ (참고 : 상위 요소 내부의 텍스트가 "점프"하는 것을 방지하려면 요소에 1 픽셀의 패딩을 추가하고 마우스 오버시 제거하거나 텍스트를 중앙 집중식으로 정렬하거나 원하는 방법으로 시도해 볼 수 있습니다.)

둘째

, 더 비효율적 인 방법 (하지만 난 늘 여기에 이동 사용의있다)과 같이 그들에게이 요소가 아이 요소를 가지고있는 경우에 당신이 알 수 있으며, 클래스를 적용 http://jsfiddle.net/deloretta/XVrr6/

이상적으로, IE7 + 스타일은 자신의 스타일 시트 (IE7 +가 !important 구문을 지원함)에 있으며 조건부 주석을 사용하여 액세스 할 수 있습니다. 기본적으로 border 속성을 제거하고 IE 특정 스타일 시트에 배치하십시오. IE는 -moz-과 -webkit- 선언을 무시하고 border 속성을 올바르게 렌더링하며, moz/webkit은 조건부 주석을 무시하고 상자 그림자를 렌더링합니다. Lovely jubbly.

희망이 도움이됩니다.

편집 - 최초의 코멘트에 응답 :

은 내가 귀하의 의견을 이해 생각한다. 그렇지 않은 경우 알려 주시면 더 도움을 드리겠습니다.

조건부 주석으로이 작업을하려면 두 가지 스타일을 구분해야합니다. 하나는 IE 용이고 다른 하나는 다른 모든 브라우저 용입니다. 이 같은이 작업을 수행 할 수 있습니다

<link rel="stylesheet" type="text/css" href="/style.css"> 
<!--[if IE]> 
<link rel="stylesheet" type="text/css" href="/style_ie.css"> 
<![endif]--> 

그런 다음이 정보를 포함하는 기존 스타일 시트를 수정해야합니다 :

이

#nav #link1.selected > a { 
    padding-bottom: 10px; 
    margin-bottom: 0; 
    -webkit-border-radius: 5px 5px 0 0; 
    -moz-border-radius: 5px 5px 0 0; 
      border-radius: 5px 5px 0 0; 
    /*the border declaration used to be here 
    but we moved to another stylesheet 
    specifically for IE*/ 
    -webkit-box-shadow:0px 1px 1px #f0f; 
    -moz-box-shadow:0px 1px 1px #f0f; 
} 
.static_class{ 
    /*border used to be here*/ 
    -webkit-box-shadow:0px 1px 1px #f0f; 
    -moz-box-shadow:0px 1px 1px #f0f; 
} 

다음, styles_ie.css라는 별도의 스타일 시트를 작성 -이 경계 정보를 수용 할 것을 우리 다른 스타일 시트에서 제거되었습니다. 그래서 같이 : 그래서

#nav #link1.selected > a { 
    border-bottom:1px solid #f0f; 
    border-left:1px solid #f0f; 
    border-right:1px solid #f0f; 
} 
.static_class{ 
    border-bottom:1px solid #f0f; 
    border-left:1px solid #f0f; 
    border-right:1px solid #f0f; 
} 

... 어떻게됩니까?

Internet Explorer는 조건부 주석을 지원하는 유일한 브라우저입니다.따라서 Firefox, Safari 또는 Chrome이 페이지에 있으면 주석을 무시하므로 주석에 링크 된 스타일 시트가 렌더링되지 않습니다.
Internet Explorer가 페이지에 도착하면 styles.css에서 이해하는 모든 것을 렌더링합니다 (이해할 수 없기 때문에 border-radius 및 box-shadow 속성을 무시함). 그런 다음 조건부 주석 (이해할 수 있음)으로 이동 한 다음 스타일 시트 styles_ie.css을로드 한 다음 추가 스타일을 요소에 적용합니다. 쉬운 - peasy, 레몬 - 스퀴지 :]