title: HTML-CSS-JS Drop-down menu not working how it should in IE
body: <p>I am working on a website, and, of course, I've got some issues with IE.
  The problem is in the drop-down menus i created:</p>
  
  <p>This is how it should look (and how it does in all browsers except IE) when I hover the mouse on a menu item:</p>
  
  <p><img src="https://i.stack.imgur.com/6ZMaf.png" alt="enter image description here"></p>
  
  <p>This is how it looks in IE9 (and 8 too):</p>
  
  <p><img src="https://i.stack.imgur.com/Vr1YL.png" alt="enter image description here"></p>
  
  <p>It seems like the menu doesn't go outside the bounds of the parent.</p>
  
  <p>Here's the structure of the menu:</p>
  
  <pre><code>&lt;div id="nav-bar"&gt;
  &lt;div id="menu"&gt;
      &lt;div class="menu-item" id="sort"&gt;
          &lt;div class="nav-item" id="nav-item-sort"&gt;Ordina per&lt;/div&gt;
          &lt;div class="top-down" id="top-down-sort"&gt;
              &lt;div class="top-down-item sort" data-sort=''&gt;Niente&lt;/div&gt;
              &lt;div class="top-down-item sort" data-sort='Titolo'&gt;Titolo&lt;/div&gt;
              &lt;div class="top-down-item sort" data-sort='Autore'&gt;Autore&lt;/div&gt;
              &lt;div class="top-down-item sort" data-sort='Casa_Editrice'&gt;Casa Editrice&lt;/div&gt;
              &lt;div class="top-down-item sort" data-sort='Prezzo'&gt;Prezzo&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="menu-item" id="category"&gt;
      &lt;div class="nav-item" id="nav-item-category"&gt;Categoria&lt;/div&gt;
      &lt;div class="top-down" id="top-down-category"&gt;
          &lt;div class="top-down-item category" data-cat=''&gt;Tutte&lt;/div&gt;
          &lt;div class="top-down-item category" data-cat='Giallo'&gt;Gialli&lt;/div&gt;
          &lt;div class="top-down-item category" data-cat='Fantasy'&gt;Fantasy&lt;/div&gt;
          &lt;div class="top-down-item category" data-cat='Horror'&gt;Horror&lt;/div&gt;
          &lt;div class="top-down-item category" data-cat='Tecnologia'&gt;Tecnologia&lt;/div&gt;
          &lt;div class="top-down-item category" data-cat='Sport'&gt;Sport&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div style="clear: both;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here's the style for the menu:</p>
  
  <pre><code>div#nav-bar {
      width: 100%;
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      height: 35px;
      text-align: left;
      border: 2px solid black;
      border-right: none;
      border-left: none;
  }
  
  div#menu {
      clear: both;
      float: left;
      display: inline-block;
      z-index: 10;
  }
  
  div.nav-item {
      display: inline-block;
      zoom: 1;
      *display: inline;
      height: 28px;
      border-left: 1px solid black;
      border-right: 1px solid black;
      width: 140px;
      text-align: center;
      padding-top: 7px;
      padding-left: 0px;
      padding-right: 0px;
      margin: 0px 0px 0px 0px;
  }
  
  div.top-down {
      position: absolute;
      width: 140px;
      text-align: center;
      left: -1px;
      display: none;
      z-index: 10;
      border-left: 1px solid rgba(0, 0, 0, 0);
  }
  </code></pre>
  
  <p>And here's the javascript code that handles the menu (using jQuery):</p>
  
  <pre><code>$("div.menu-item").mouseenter(function(e){
      var id = $(this).attr("id");
      cur_menu = id;
      var ni = $("div#nav-item-" + id);
      ni.addClass("selected");
      $("div#top-down-" + id).stop().slideDown(100);
  });
  
  $("div.menu-item").mouseleave(function(e){
      var id = $(this).attr("id");
      $("div#top-down-" + id).stop().slideUp(100, function(){
          $("div#nav-item-" + id).removeClass("selected");
      });
  });
  </code></pre>
  
  <p>...What am I doing wrong??</p>