목록 기반의 드롭 다운 메뉴는 내가이 웹 사이트에 일하고 있어요 IE

Question

작동하지 : 드롭 다운 메뉴는 IE에서 제대로 작동하지 않습니다 http://cecraig.hhdev.hothousemarketing.com

(나는 IE9과 IE8에서 테스트했습니다). 하위 메뉴 (ul)는 부모의 텍스트 위로 마우스를 가져 가면 마우스가 사라지는 텍스트 바깥으로 나가 자마자 나타납니다. 나는 다른 사이트의 드롭 다운 메뉴에 대해 같은 방법을 사용했으며 Internet Explorer에서는 제대로 작동하지만 여기서는 왜 작동하지 않는지 잘 모릅니다. 나는 IE가 제한된 지원을했다는 것을 안다 : "a"가 아닌 다른 요소를 가리 키지 만, 그것이 IE7까지 였는지 알 수있다.

#mainNav ul { 
margin: 0; 
padding: 0; 
list-style-type: none; 
} 
#mainNav > ul { 
margin-left: 234px; 
height: 38px; 
} 
#mainNav > ul > li { 
position: relative; 
float: left; 
} 
#mainNav ul li a { 
font-size: 11pt; 
color: #fff; 
text-decoration: none; 
} 
#mainNav > ul > li > a { 
display: block; 
height: 18px; 
padding: 10px 12px; 
} 
#mainNav ul li a:hover { 
color: #efefef; 
} 
#mainNav ul li.current-menu-item > a, #mainNav > ul > li.current-page-parent > a { 
font-weight: bold; 
} 
#mainNav ul ul { 
background-color: #e1a100; 
display: none; 
margin: 0; 
position: absolute; 
top: 38px; 
left: 0; 
width: 200px; 
padding: 0 8px 8px 8px; 
z-index: 99999; 
} 
#mainNav ul li:hover > ul { 
display: block; 
} 
#mainNav ul ul li + li { 
margin-top: 5px; 
} 

Answer 1

시도 : 여기

내가 메뉴에 사용하고있는 CSS, 당신은합니다 (wp_nav_menu() 워드 프레스 기능에 의해 출력되는) 메뉴의 HTML을 참조에 대한 소스를 가져올 수 다음을 추가 :

.menu-item:hover{ display: block; } 

IE는 복잡한 호버 선택기와 잘 일치하지 않습니다.

Answer 2

:hover의 문제를 해결하려면 <a> 요소에 사용해야합니다. IE는 태그에서만 :hover을 지원하지만 li,div,span,dd,etc...