title: Javascript menu in Internet explorer 8
body: <p>I got a problem with a javascript Menu. Everything works well in Chrome, Firefox, IE9, safari but the menu is not clickable on IE8, nothing happens.</p>
  
  <p>Here is my code simplified :</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready( function () {
    // On cache les sous-menus :
    $(".navigation ul.subMenu").hide();    
      // On modifie l'évènement "click" sur les liens dans les items de liste
      // qui portent la classe "toggleSubMenu" :
      $(".navigation li.toggleSubMenu  &gt; a").click( function () {
          // Si le sous-menu était déjà ouvert, on le referme :
          if ($(this).next("ul.subMenu:visible").length != 0) {
              $(this).next("ul.subMenu").slideUp("normal");
          }
          // Si le sous-menu est caché, on ferme les autres et on l'affiche :
          else {
              $(".navigation ul.subMenu").slideUp("normal");
              $(this).next("ul.subMenu").slideDown("normal");
          }
          // On empêche le navigateur de suivre le lien :
         return false;
      });   
  
  } ) ;
  &lt;/script&gt; 
  
      &lt;ul class="navigation" style="list-style-image : none ;" &gt;
  
        &lt;li class="toggleSubMenu"&gt;&lt;a href="#" class="bouton" onclick="return false;" &gt;&lt;div id="metro_gris" &gt;&lt;span id="metro_title" &gt;&lt;?php echo METRO_MAP; ?&gt;&lt;/span&gt;&lt;span id="metro_select" &gt;&lt;/span&gt;&lt;/div&gt;&lt;/a&gt;
          &lt;ul class="subMenu" style="position : absolute ; display : none; list-style-image : none ; " &gt;
  
                  &lt;li&gt;&lt;a href="#" onclick="javascript:calculate('Abbesses Paris', 'WALKING', 'metro', 'Abesses' ); return false;" &gt;Abesses (ligne 12)&lt;/a&gt;&lt;/li&gt;
  
            &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>.navigation {
    padding: 0;
    color: #fff;
    width: 200px;
    margin : 0 auto;
    margin-top : 20px;
    margin-bottom : 20px;
    list-style: none;
    list-style-type: none; 
  }
  .navigation a {
    display: block;
    color: #fff;
    text-decoration: none;
    /*background: #000 url(menu-item.png) left bottom no-repeat;*/
  }
  .navigation a div{
      padding: 4px 10px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;`enter code here`
  }
  
  .navigation .subMenu {
    font-size: 12px;
    /*background: #ccc url(subMenu.png) 0 0 repeat-x;*/
    font-size: 12px;
    margin: 0;
    padding: 0;
    width : 200px;
    background : #000;
    border-bottom: 1px solid &lt;?php echo $site-&gt;couleur ; ?&gt; ;
    list-style: none;
    list-style-type: none; 
  }
  </code></pre>
  
  <p>What might be causing this issue and how can I solve it? Thank you.</p>