title: CSS menu won't work with internet explorer 11
body: <p>I found this <strong>CSS</strong> code for an horizontal dropdown menu over the internet which at first seems really good (the results on chrome are perfect). However, when I try it with internet explorer, white spaces appear between the dropdown elements and I cannot navigate the menu.</p>
  
  <p>Have any idea? Your help would be greatly appreciated. </p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div id="menu"&gt;
  
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="accueil.htm"&gt;Accueil&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="cv/Cvfrdept.pdf"&gt;CV&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="accueil.htm"&gt;Enseignement&lt;/a&gt;
      &lt;ul&gt;
                      &lt;li&gt;&lt;a href="plans.htm"&gt;Plans de cours&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="lecons.htm"&gt;Leçons&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="ppt.htm"&gt;Powerpoints &lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="recherche.htm"&gt;Recherche&lt;/a&gt;
      &lt;ul&gt;
                      &lt;li&gt;&lt;a href="italia.htm"&gt;Italia&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="livres.htm"&gt;Livres&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="liens.htm"&gt;Liens&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="contact.htm"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="home.htm"&gt;English&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  
   &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS :</p>
  
  <pre><code>ul {
     font-family: Arial, Verdana;
     font-size: 14px;
     margin: 0;
     padding: 0;
     list-style: none;
  }
  
  ul a:hover {
      color: #ffffff;         
  }
  
  ul li {
    display: block;
    position: relative;
    float: left;
  }
  
  li ul { 
     display: none; 
  }
  
  ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 0px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #2C5463;
    margin-left: 0px;
    white-space: nowrap;
  }
  ul li a:hover { 
    background: #617F8A; 
  }
  
  li:hover ul {
    display: block;
    position: absolute;
  }
  
  li:hover li {
    float: none;
    font-size: 11px;
  }
  
  li:hover a { 
    background: #617F8A; 
  }
  
  li:hover li a:hover { 
    background: #95A9B1; 
  }
  </code></pre>