2011-07-17 9 views
0

스크립트 제목 간다 나는 메뉴가 있지만, 잘 일하고있어위치가 잘못

http://www.dynamicdrive.com/style/cs...rop_line_menu/, 나는 발견을하는 내가있을 때 도구 모음에서 비틀 거림, 하위 메뉴가 갑자기 22px 이하로 배치됩니다. 때로는이 차이가 여러 배로 증가합니다. stumbleupon 툴바를 사용하도록 설정하고 하위 메뉴가있는 메뉴 항목 중 하나 위에 마우스를 올리면 Chrome 브라우저에서 직접이 동작을 테스트 할 수 있습니다. http://kwestievan.nl/unityexpress/

어떻게 해결할 수 있습니까? body.offset(). top이 문제인지 확인했지만 실제로는 차이점보다 높습니다 (32px, 메뉴의 차이는 22px).

+0

stumbleupon 툴바를 어떻게 켜십시오! – Jawad

+0

아, Chrome 확장 프로그램입니다. https://chrome.google.com/webstore/detail/kcahibnffhnncedcedchmokmkndkjnhpg 그래서 설치 한 후 테스트 페이지에서 켭니다. – Coen

답변

0

이유는 서브 메뉴가

<ul class="sub-menu"</ul> 

는 이것이하는 일은 브라우저 창에 하위 메뉴 "RELATIVE"장소입니다

position: absolute; 
left: 233px; 
top: 224px; 

의 스타일을 부여 중의 요소 beacuse 낮은 따라서 왼쪽에서 223px이고 "브라우저 창"의 상단에서 224px입니다. 이것은 "stumbleupon"툴바가 없을 때 잘 동작합니다. 그러나 stumbleupon 도구 모음을 추가하면 도구 모음이 iframe 요소 형식으로 추가됩니다. iframe 요소의 높이보다 브라우저 창의 크기가 변경되어 하위 메뉴가 아래로 밀려납니다.

"stumbleupon"툴바의 높이를 알아 내고 하위 메뉴가 모니터/화면 해상도에서 푸시 다운 한 거리의 높이와 비교하는 것보다 빨리 테스트 할 수 있습니다. 그들은 동일 할 것이다.

용액 소자를 제공하는 것이다

<li id="menu-item-1738"</li> 

가 정렬하고되도록 서브 메뉴

position: relative; 

의 스타일 이외의 스타일은 "절대적"받는 "RELATIVE"위치 li 요소를 포함합니다. 예를 들어

position: absolute; 
top: 20px; 
left: 15px; 

오프 코스 모든 작업이 스크립트에 의해 수행됩니다. 왜 당신이 자바 스크립트를 사용하고 있는지 모르겠습니다. 이것은 CSS만으로 쉽게 얻을 수 있습니다.