CSS Internet Explorer 7 버그의 드롭 다운 메뉴

Question

Firefox 드롭 다운 메뉴가 내장되어 있으며 Firefox와 Chrome에서 완벽하게 작동합니다. 그러나 Internet Explorer 7과 8에서는 드롭 다운이 오른쪽으로 이동하여 링크를 클릭 할 수 없습니다. http://jsfiddle.net/xMrPE/

그리고 여기 IE7 아래의 스크린 샷 :

<div class="menu"> 
<ul> 
    <li> 
     <a href="#">La meunerie française</a> 
     <ul> 
      <li style="margin-left:0;"><a href="conseil.php">Conseil d'administration</a></li> 
      <li style="margin-left:0;"><a href="syndicats.php">Syndicats régionaux</a></li> 
      <li style="margin-left:0;"><a href="equipe.php">L'équipe</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">La filière</a> 
     <ul> 
      <li style="margin-left:0;"><a href="entites_analyse.php">Entités techniques de la meunerie</a></li> 
      <li style="margin-left:0;"><a href="meunerie_europe.php">Meunerie européenne</a></li> 
      <li style="margin-left:0;"><a href="horsue.php">Meunerie hors UE</a></li> 
      <li style="margin-left:0;"><a href="organisations.php">Organisations professionnelles</a></li> 
      <li style="margin-left:0;"><a href="intercereales.php">Intercéréales</a></li> 
      <li style="margin-left:0;"><a href="franceagrimer.php">FranceAgriMer</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Les Moulins</a> 
     <ul> 
      <li style="margin-left:0;"><a href="regions-meunieres.php">Régions meunières</a></li> 
      <li style="margin-left:0;"><a href="regions-administratives.php">Régions administratives</a></li> 
      <li style="margin-left:0;"><a href="farines.php?farine_id=">Farines & produits commercialisés</a></li> 
      <li style="margin-left:0;"><a href="groupements.php">Groupements meuniers</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Fournisseurs</a> 
     <ul> 
      <li style="margin-left:0;"><a href="fournisseurs-rubrique.php">Rubrique</a></li> 
      <li style="margin-left:0;"><a href="fournisseurs-alphabetique.php">Liste Alphabétique</a></li> 
     </ul> 
    </li> 
</ul> 
</div> 

CSS의 :

.menu { 
    width:100%; 
    height:55px; 
    float:left; 
    position:relative; 
    z-index: 1000; 
    background-color: #5c4a29; 
} 

.menu ul { 
    list-style: none; 
    padding-top:7px; 
    font-size: 11px; 
} 

.menu ul li { 
    float:left; 
    margin-left:55px; 

} 

.menu ul li a { 
    color:#ffffff; 
    padding-bottom:25px; 
} 

.menu ul li a:hover, .menu ul li a.actif, .menu ul li:hover > a{ 
    color:#DDD3AA; 
} 

.menu ul ul { 
    display:none; 
} 



.menu ul li:hover > ul { 
    display: block; 
    position:absolute; 
    z-index: 10000; 
    width:210px; 
    padding-bottom:20px; 
    top:55px; 
    -webkit-border-radius: 0px 10px 0px 10px; 
    border-radius: 0px 10px 0px 10px; 
    background-color: #5c4a29; 
} 

.menu ul ul li { 
    width:190px; 
    padding-left:10px; 
    float: left; 
    margin-top:10px; 
} 

.sidebar { 
    width:225px; 
    min-height:400px; 
    float:left; 
    position:relative; 
} 

여기 http://s16.postimg.org/g90wthb2t/image.png

는 HTML입니다

나는 여기에 jsFiddle했다

정말 제대로 작동하지 않는 이유를 알 수 없습니다.

도움을 주시면 감사하겠습니다. 미리 감사드립니다! 내가 그렇게 당신이 실제로 링크를 선택할 수 있습니다 (55) 45에서 최고를 변경할 것입니다 귀하의 CSS 라인 (37)에 하나

세바스티앙

Answer 1

합니다. 또한 라인 1에서 높이를 45로 변경하십시오.

.menu ul li:hover > ul { 
display: block; 
position:absolute; 
z-index: 10000; 
width:210px; 
padding-bottom:20px; 
top:45px; 
-webkit-border-radius: 0px 10px 0px 10px; 
border-radius: 0px 10px 0px 10px; 
background-color: #5c4a29; 
} 

.menu { 
width:100%; 
height:55px; 
float:left; 
position:relative; 
z-index: 1000; 
background-color: #5c4a29; 
}