드롭 다운 메뉴가 IE에 표시되지 않습니다 (내용 뒤에 숨김)

Question

나는이 문제에 당황했습니다. 필자는 상대적이고 다양한 Z- 인덱스를 사용하지 않았다. 다음은 간단한 드롭 다운 메뉴 코드입니다. IE를 제외한 모든 브라우저에서 정상적으로 작동합니다.

HTML 페이지 :

는

<div id="nav"> 
<ul id="navul"> 
    <li id="rootHome"> 
    <ul id="Home"></ul><a href="index.php"><img src="images/LA-icon.png" style= 
    "height: 40px;" id="home" /></a> 
    </li> 
    <li id="rootProducts" onclick="showMenu(this)">Products 
    <ul id="Products"> 
     <li> 
     <p class="navLink" onclick="changePage('products-1.php')">Product 1</p> 
     </li> 
     <li> 
     <p class="navLink" onclick="changePage('products-2.php')">Product 2</p> 
     </li> 

     <li> 
     <p class="navLink" onclick="changePage('products-3.php')">Product 3</p> 
     </li> 
    </ul> 
    </li> 
    <li id="rootNews"> 
    <a href="#Link for news" class="navLink">News</a> 
    </li> 
    <li id="rootCompany" onclick="showMenu(this)">Company &acirc;&circ;&uml; 
    <ul id="Company"> 
     <li> 
     <p class="navLink" onclick="changePage('./company-aboutUs.php')">About Us</p> 
     </li> 
     <li> 
     <p class="navLink" onclick="changePage('./company-contactUs.php')">Contact 
     Us</p> 
     </li> 
    </ul> 
    </li> 
</ul> 

CSS : (포맷이 여기에 작동하지 않았다) http://pastebin.com/raw.php?i=CjyQhXCs

Answer 1

가 id=nav DIV에 position: relative 및 z-index: 100를 사용해보십시오. Z- 색인은 레이어로 작동합니다. 요소의 부모가 0의 Z- 색인을 갖고 그 요소의 Z- 색인이 100 인 경우, 요소는 여전히 Z- 색인이 1 인 상위의 형제 인 다른 요소 뒤에 나타납니다.

---

문제

는 #navul UL에 filter 사용의 직접적인 결과였다. 계산의 어딘가에서 IE는 요소가 자동으로 오버플로를 숨기도록 만듭니다. 수정하려면 배경을 자체 요소로 이동하고 절대적으로 배치하십시오.

http://jsfiddle.net/uTBZN/30/

신용에 :

How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?

Answer 2

그냥 @Stu처럼, 내 탐색 UL에 필터를했다 (내 경우에는, .navbar) :

.navbar { 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#87e0fd', endColorstr='#64d7f4',GradientType=0); /* IE6-9 */ 
} 

@Greg 당 필터를 제거하자마자 드롭 다운 메뉴는 IE9의 페이지 내용 위에 남았습니다. 고마워, 내 하루 구 했어!