title: CSS Drop down menu on Internet Explorer 7 bug
body: <p>I have a CSS drop down menu built, that is working perfectly of course in Firefox and Chrome. But on Internet explorer 7 and 8, the drop down is moved to the right making it impossible to click the links.</p>
  
  <p>I made a jsFiddle here :
  <a href="http://jsfiddle.net/xMrPE/" rel="nofollow">http://jsfiddle.net/xMrPE/</a></p>
  
  <p>And a screenshot of it under ie7 here :
  <a href="http://s16.postimg.org/g90wthb2t/image.png" rel="nofollow">http://s16.postimg.org/g90wthb2t/image.png</a></p>
  
  <p>here is the HTML :</p>
  
  <pre><code>&lt;div class="menu"&gt;
  &lt;ul&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;La meunerie française&lt;/a&gt;
          &lt;ul&gt;
              &lt;li style="margin-left:0;"&gt;&lt;a href="conseil.php"&gt;Conseil d'administration&lt;/a&gt;&lt;/li&gt;
              &lt;li style="margin-left:0;"&gt;&lt;a href="syndicats.php"&gt;Syndicats régionaux&lt;/a&gt;&lt;/li&gt;
              &lt;li style="margin-left:0;"&gt;&lt;a href="equipe.php"&gt;L'équipe&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;La filière&lt;/a&gt;
          &lt;ul&gt;
              &lt;li style="margin-left:0;"&gt;&lt;a href="entites_analyse.php"&gt;Entités techniques de la meunerie&lt;/a&gt;&lt;/li&gt;
              &lt;li style="margin-left:0;"&gt;&lt;a href="meunerie_europe.php"&gt;Meunerie européenne&lt;/a&gt;&lt;/li&gt;
              &lt;li style="margin-left:0;"&gt;&lt;a href="horsue.php"&gt;Meunerie hors UE&lt;/a&gt;&lt;/li&gt;
              &lt;li style="margin-left:0;"&gt;&lt;a href="organisations.php"&gt;Organisations professionnelles&lt;/a&gt;&lt;/li&gt;
              &lt;li style="margin-left:0;"&gt;&lt;a href="intercereales.php"&gt;Intercéréales&lt;/a&gt;&lt;/li&gt;
              &lt;li style="margin-left:0;"&gt;&lt;a href="franceagrimer.php"&gt;FranceAgriMer&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;Les Moulins&lt;/a&gt;
          &lt;ul&gt;
              &lt;li style="margin-left:0;"&gt;&lt;a href="regions-meunieres.php"&gt;Régions meunières&lt;/a&gt;&lt;/li&gt;
              &lt;li style="margin-left:0;"&gt;&lt;a href="regions-administratives.php"&gt;Régions administratives&lt;/a&gt;&lt;/li&gt;
              &lt;li style="margin-left:0;"&gt;&lt;a href="farines.php?farine_id="&gt;Farines &amp; produits commercialisés&lt;/a&gt;&lt;/li&gt;
              &lt;li style="margin-left:0;"&gt;&lt;a href="groupements.php"&gt;Groupements meuniers&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;Fournisseurs&lt;/a&gt;
          &lt;ul&gt;
              &lt;li style="margin-left:0;"&gt;&lt;a href="fournisseurs-rubrique.php"&gt;Rubrique&lt;/a&gt;&lt;/li&gt;
              &lt;li style="margin-left:0;"&gt;&lt;a href="fournisseurs-alphabetique.php"&gt;Liste Alphabétique&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS :</p>
  
  <pre><code>.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 &gt; a{
      color:#DDD3AA;
  }
  
  .menu ul ul {
      display:none;
  }
  
  
  
  .menu ul li:hover &gt; 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;
  }
  </code></pre>
  
  <p>I really can't see why it isn't working correctly.</p>
  
  <p>Any help would be much appreciated. Thanks in advance !</p>
  
  <p>Sébastien</p>