IE CSS 중첩 된 가로 목록 위치

Question

(http://lwis.net/free-css-drop-down-menu/dropdown.simple.linear.html)의 수정 된 버전을 사용하여 중첩 된 목록을 만들었습니다 3 단계. 레벨 1과 레벨 2는 수평이고 레벨 3은 수직입니다 (최소한 계획은 평면입니다)

첫 번째와 두 번째 레벨은 모든 브라우저에서 예상대로 작동합니다.

IE6에서는 세 번째 수준이 바로 아래에있는 대신 부모 LI의 끝에서 시작됩니다.

EG :

| Item 1 | Item 2 | Item 3 | 
| Item 2.1 | Item 2.2 | Item 2.3 | 
         | Item 2.2.1 | 
         | Item 2.2.2 | 

가되어야한다

나는 술집에 충돌 할 때이의 모든 원조 진심으로 감사 제기 유리 충족 될

| Item 1 | Item 2 | Item 3 | 
| Item 2.1 | Item 2.2 | Item 2.3 | 
      | Item 2.2.1 | 
      | Item 2.2.2 | 

)

모든 코드는

jQuery를

$(document).ready(function(){ 

    if($("ul.dropdown").length) { 
     $("ul.dropdown li").dropdown(); 
    } 

}); 

$.fn.dropdown = function() { 

    return this.each(function() { 

     $(this).hover(function(){ 
      $(this).addClass("hover"); 
      $('> .dir',this).addClass("open"); 
      $('ul:first',this).css('visibility', 'visible'); 
     },function(){ 
      $(this).removeClass("hover"); 
      $('.open',this).removeClass("open"); 
      $('ul:first',this).css('visibility', 'hidden'); 
     }); 

    }); 

} 

CSS

ul.dropdown { 
    width: 1003px; 
    background-color: #ccc; 
    border: solid 1px #999; 
    position: relative; 
    height: 30px; 
} 
ul.dropdown, ul.dropdown li, ul.dropdown ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
ul.dropdown li { 
    display: inline; 
    padding: 5px; 
    float: left; 
    line-height: 1.3em; 
    vertical-align: middle; 
} 
ul.dropdown li :hover { 
    color: #000; 
    background-color: #ddd; 
} 
ul.dropdown li:hover > ul { 
    visibility:visible; 
} 
ul.dropdown li a { 
    text-decoration: none; 
    background-color: #dde; 
} 
ul.dropdown ul { 
    visibility: hidden; 
    position: absolute; 
    top: 100%; 
    left: -1px; 
    z-index: 598; 
    width: 1003px; 
    display: inline-block; 
    background-color: #ccc; 
    border: solid 1px #999; 
} 
ul.dropdown ul ul{ 
    width: auto; 
    margin: 0 0 0 -10px; 
    border-top: solid 1px #CCC; 
    background-color: #F6F6F6; 
    position: absolute; 
    left: auto; 
} 
ul.dropdown ul ul li { 
    white-space: nowrap; 
    display: inline-block; 
} 

HTML

<ul class="dropdown"> 
    <li><a href="#">Item 1</a> 
    <ul> 
     <li><a href="#">Item 1.1</a></li> 
     <li><a href="#">Item 1.2</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Item 2</a> 
    <ul> 
     <li><a href="#">Item 2.1</a></li> 
     <li><a href="#">Item 2.2</a> 
     <ul> 
      <li><a href="#">Item 2.2.1</a> 
      <li><a href="#">Item 2.2.2</a> 
     </ul> 
     </li> 
     <li><a href="#">Item 2.3</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Item 3</a> 
    <ul> 
     <li><a href="#">Item 3.1</a></li> 
     <li><a href="#">Item 3.2</a></li> 
    </ul> 
    </li> 
</ul> 

Answer 1

정말, IE6에서 스타일링 문제를 파악하는 것은도 문제가 될 안된다. 데이터가 표시되므로 가장 기술적 인 관점에서 사이트가 작동하고 데이터를 검색 할 수 있습니다.

여전히 IE6를 사용하는 3 %의 사용자를 만족시키기 위해 10 년 이상 된 브라우저를 지원하는 추가 번거 로움과 노력은 그만한 가치가 없습니다. 브라우저가 IE8을 IE8로 업그레이드하거나 다른 브라우저로 전환하는 것을 사용자가 감지하고 적극 권장합니다.