IE8 목록 항목을 가리키면 하위 메뉴가 활성 상태 일 때 다른 목록 항목이 적용됩니다.

Question

목록을 사용하는 주 메뉴가 있습니다. 사용자가 항목 위로 마우스를 가져 가면 배경색을 변경하고 해당 하위 메뉴를 표시하면서 사용자에게 마우스를 가리 키도록 위로 이동합니다. 당신이 불을 지르고 필요하면

Link to the website with the issue.

는

쿼리 문자열에 충실 디버그를 = 추가합니다.

문제는 IE8에 어디 하위 메뉴가 활성화되어 있고 사용자가이 너무 이상 공중 선회하고있다처럼 이전 항목의 모든 행동 메인 레벨의 모든 목록 항목을 가리키면합니다. 즉, 목록 항목이 위로 이동하지만 background-color은 변경되지 않습니다. 사용자가 목록 항목 위로 마우스를 이동하는 방법에 따라 일부 항목은 시작 위치보다 아래쪽으로 이동합니다.

여기 SASS은 CSS으로 변환되어 어떻게 메뉴 항목을 이동하는지 이해하는 데 도움이됩니다.

#mainmenu ul li:hover, 
#mainmenu ul li.active{ 
    margin-top: -15px 
} 

하위 메뉴 간 HTML의 유일한 차이는 활성화되고 아닌 주층 목록 항목 것은 클래스 active를 얻을 수있는 CSS 활성 서브 목록 항목이 사용되지 않는 클래스 subactive있다.

나는 문제가 background-color 변경과 margin-top 음수 값 사이에 있다고 느낍니다.

일반적으로 영향을받는 요소는 이전에 영향을받지 않았을 것으로 예상됩니다.

Javascript 수정 사항을 피하십시오.

감사합니다.

Answer 1

IE8에서 margin-top: -15px을 조정하면 LI를 UL 상자 외부로 이동시키는 대신 UL 상자를 위로 맞추어 밀어 넣습니다. 다른 모든 탭은 새로운 UL 상자에 맞게 움직입니다.

비 호버 LI를 margin-top: 15px으로 설정하고 LI를 margin-top: 0- 뒤집기로 설정하는 것이 좋습니다.

#mainmenu UL LI 
{ 
    margin-top: 15px; 
} 

#mainmenu UL LI:hover 
{ 
    margin-top: 0; 
} 

(이 여전히 크로스 브라우저를 작동합니다.) 나를 위해 그것을했다