IE 6 7 또는 8에서 CSS 드롭 다운 메뉴가 작동하지 않습니다.

Question

저는 하루 종일 내 머리를 터벅 터벅 걷고 있었고 모든 포럼에서 솔루션을 찾기 위해 생각할 수있었습니다 ... 아무 소용이 없습니다. .. 도와주세요.

저는 매우 간단한 드롭 다운 메뉴를 사용하여 아주 간단한 웹 사이트를 만들었습니다.

파이어 폭스와 사파리에서 잘 작동하지만 드롭 다운은 Internet Explorer에 표시되지 않고 찾을 수있는 버전이 아닙니다. website

호버 링크 색상을 변경하지만 드롭 다운이 본질적으로 나중에 전체 웹 사이트를 만드는 데 사용되는 템플릿입니다

을하지 못하기 때문에 작동하는 것 같군 : 여기

임시 링크입니다. .. 지금은이 메뉴를 작동시키고 싶습니다.

또한 : 로고 주변에 이상한 경계를 두는 것처럼 보입니다 ... 아무도 그게 뭔지 알아?

a img { 
border-style: none; 
} 

내가 몇 가지를 시도하고 호버 이벤트가 사용한 선택기 작동하지 않습니다 :

Answer 1

이 로고에 경계를 제거하려면 스타일 시트에서 이것을 사용

#menu ul li:hover ul 

나는이 함께 파일에 그것을 가지고 :

#menu ul a:hover 

을하지만 당신이 그것을 보여주기 위해 UL 요소에 액세스 할 수 없습니다 ... I IE (적어도 IE6)에서이 문제를 해결하려면 Javascript가 필요하다고 생각합니다.

Answer 2

IE6은 링크 이외의 다른 요소에 :hover을 지원하지 않습니다. 에 의해 Son of Suckerfish Dropdowns 문서에서 sfHover 함수를 살펴보십시오. 이 함수는 IE6의 JavaScript 대안입니다. 나는 당신이 전체 기사를 읽는 것이 좋습니다.

sfHover = function() { 
    var sfEls = document.getElementById('nav').getElementsByTagName('li'); 
    for (var i = 0; i < sfEls.length; i++) { 
     sfEls[i].onmouseover = function() { 
      this.className += ' sfhover'; 
     } 
     sfEls[i].onmouseout = function() { 
      this.className = this.className.replace(new RegExp(' sfhover\\b'), ''); 
     } 
    } 
} 
if (window.attachEvent) window.attachEvent('onload', sfHover); 

그리고 이미지의 보더

, 단순히 추가

img { border:0 }