e7 드롭 다운 메뉴를 마우스로 가리키면

Question

ie7에 문제가 발생했습니다! 아래 이미지에서 드롭 다운 메뉴의 모양을 확인하십시오. 이것은 다른 모든 브라우저에서 잘 작동하지만 예를 들어, 주 리의 외부로 벤처하자마자 즉 '가기 링크'메뉴가 사라집니다. 이미 모든 항목 주위에 빨간색 상자를 설정했는지 확인했는데 li 요소가 하위 메뉴를 포함하도록 올바르게 확장되었지만 해결할 수 없습니다. 어떤 아이디어? 마크 업의

예 : http://jsfiddle.net/n2kgX/3/

이미지 : http://i.stack.imgur.com/k24Du.png 여기

Answer 1

당신이 무엇을 할 수 있습니다 :

<nav>  
    <ul class="clearfix">  
    <li class="dropdown-link"><a href="#" class="main-link">Top Link</a> 
     <ul class="clearfix dropdown-holder"> 
     <li>  
      <div class="arrow"></div> 
      <div class="dropdown-holder-inner"> 
      <ul class="dropdown"> 
       <li><a href="#">Link</a></li> 
       <li><a href="#">Link</a></li> 
       <li><a href="#">Linky</a></li> 
       <li><a href="#">Link</a></li> 
       <li><a href="#">Link</a></li> 
       <li class="last-child"><a href="#">Link</a></li> 
      </ul> 
      </div> 
     </li>        
     </ul> 
    </li> 
    </ul> 
</nav>​ 

CSS 그래서 난 전체 코드 jsfiddle에 넣어 가지고 매우 무거운 편이다

<!--[if lte IE 7]> 
<style type="text/css"> 
nav ul li:first-child ul.dropdown-holder{ 
    left: 0px; 
    top:-4px; 
} 
</style> 
<![endif]--> 

참고 : : 첫 번째 자녀는 IE8 이하에서 작동해야하며 <!DOCTYPE>을 선언해야합니다.

Answer 2

여기 샘플을 만듭니다 : http://jsfiddle.net/jho1086/bbULV/5/, 내 생각에는 컨테이너가 너무 많아서 HTML 코드와 CSS가 바뀝니다. 그리고 IE5 이하는 HTML5에서 지원되지 않으므로 HTML5 태그 (<nav>)를 변경합니다.

<div id="nav">  
    <ul class="clearfix sf-menu">  
     <li class="dropdown-link"><a href="#" class="main-link">Top Link</a> 
      <div class="clearfix dropdown-holder"> 
       <div class="arrow"></div> 
       <ul class="dropdown clearfix"> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Linky</a></li> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
        <li class="last-child"><a href="#">Link</a></li> 
       </ul>  
      </div>  
     </li> 
    </ul> 
</div> 

CSS

#nav { background:#6B6C6E; width:300px; margin:30px auto 0;} 
.sf-menu li{float:left; font:12px/1em 'arial'; position:relative; padding:0 0 5px;} 
.sf-menu li a{float:left;padding:12px 10px 5px;color:#fff; text-transform:uppercase;} 
.sf-menu .dropdown-holder{ 
    position:absolute; 
    left:-999em; 
    width:218px; 
    top:93%; 
} 
.sf-menu li:hover .dropdown-holder {left:-999em;} 

.sf-menu li:hover .dropdown-holder {left:0;} 
.arrow { background:url(arrow.png) no-repeat left top; width:32px; height:8px; position:relative; z-index:2; left:10px;} 
.dropdown { 
    box-shadow:0 0 5px #bec2c8; 
    background:#fff; 
    height:100%; 
    position:relative; 
    z-index:1; 
    padding:10px 10px 5px; 
} 
.sf-menu .dropdown li{text-transform:capitalize; border-bottom:1px solid #ccc;} 
.sf-menu .dropdown li.last-child { border:0;} 
.sf-menu .dropdown a{ 
    float:left; 
    padding:5px 0; 
    width:198px; 
    color:#333; 
}​​ 

는 도움이되기를 바랍니다.

Answer 3

나는 귀하의 본보기가 지나치게 복잡하다고 느끼고 있습니다. (IE7와 IE7 모드에서

.outer { 
    border: 1px solid red; 
    width: 100px; 
} 

.inner { 
    display: none; 
} 

.inner li { 
    padding: 0 0 0 10px; 
} 

.outer li:hover > .inner { 
    display: block; 
} 

IE8에서 테스트 : CSS의 조금으로

<ul class="outer"> 
    <li> 
     <p>TOP MENU</p> 
     <ul class="inner"> 
      <li><a href="#">link1</a></li> 
      <li><a href="#">link2</a> 
       <ul class="inner"> 
        <li><a href="">link2.1</a></li> 
       </ul> 
      </li>    
      <li><a href="#">link3</a></li> 
     </ul> 
    </li> 
</ul> 

:

이 내가 아는 (호버와) 중첩 메뉴의 간단한 구현 표준). 여기를 확인하십시오 : http://jsfiddle.net/BUuyV/11/