2010-08-02 6 views
3

여기 디자이너, 코드하려고합니다.자바 이미지 드롭 다운 메뉴 위로 아래로 드롭 다운

나는 거의 다 왔어! 동적 드라이브에서 드롭 다운 메뉴를 사용하여 jQuery 이미지 회전기를 처리하려고합니다. Z- 인덱스로 재생되었습니다. IE 호환성 모드를 제외한 모든 브라우저에서 이미지 회전을 통해 메뉴를 사용할 수 있으며 회전기의 버튼을 클릭 할 수 없습니다.

http://local495.bigrigmedia.com/

어떤 도움을 크게 감상 할 수있다!

답변

2

항상 Photoshop에서 모든 것을 올바르게 표시하는 것이 훨씬 쉽습니다.

을 styles.css

#top { 
    position: relative; 
    z-index: 2; 
    height: 155px; 

} 

ddsmoothmenu.css

.ddsmoothmenu{ 
    position: relative; 
    z-index: 2; 
    /* remaining css */ 
} 

homerotation.css

: 당신은 CSS 2 개 사소한 조작하여 중복 문제를 해결할 수 있습니다
div#feature_list { 
    position: relative; 
    z-index: 1; 
    /* remaining css */ 
} 

z-index: -100이 CSS 주위에 많이 뿌려졌습니다. 그것들은 또한 당신에게 문제를 일으킬 것입니다. 나는 그 (것)들을 모두 밖으로 가지고 가고 다만 위 2 개의 변화를 사용하여 건의 할 것입니다.

위의 2 가지 규칙은 모든 브라우저 (예 : 친구 인 IE)가 이해하는 방식으로 메뉴 및 이미지 회전기의 스태킹 순서를 설정하는 것입니다.

Z- 색인을 사용할 때 IE의 트릭은 오버랩하려는 모든 요소가 동일한 스태킹 컨텍스트에 있는지 확인하는 것입니다. IE는 요소에 상대적, 절대 또는 고정 위치를 사용할 때마다 새로운 스택 컨텍스트를 만듭니다. 위의 경우 스태킹 컨텍스트 (즉, 문서)의 최상위 요소에 스태킹 순서를 설정하므로이를 준수합니다.

편집

추가이 실제로 <div id="feature_list"> 같은 문서에서 같은 레벨 년대 <div> 그대로 #top 컨테이너에 Z- 인덱스.

+0

신속한 답변을 보내 주셔서 감사합니다. CSS 수정을 구현했으며 IE 호환성 모드에서도 여전히 문제가 있습니다. 드롭 다운 메뉴가 이제 이미지 회전 자 뒤에 있습니다. 제안? 모두가 왜 Firefox를 사용하지 못합니까? – Amy

+0

인터넷을 사용하는 사람들 중 좋은 비율이 그것을 코드화하지 않기 때문에 ... 수정 된 내용에 대한 편집 된 대답을 확인하십시오. – Pat

+0

정말 고마워요! 너는 나에게 많은 시간과 두통을 덜어 줬다. – Amy