title: jQuery UI show/hide with slide left not working in IE
body: <p>I'm trying to get a menu to slide in/out using jQuery UI and I can't seem to get it to work in any version of Internet Explorer.</p>
  
  <p>I'm using some conditionals to slightly modify the code for IE, but its only the difference between a "hover" event and a "click". Its working flawlessly in every other browser but breaks in IE.</p>
  
  <p>You can see the site itself at: <a href="http://actionfreightinc.kemdev.com/" rel="nofollow">http://actionfreightinc.kemdev.com/</a></p>
  
  <p>I'm trying to modify that menu that shows up on the left side of the rotating images.</p>
  
  <p>Its worth noting that when I tried stripping out the various elements, it appeared to start working when I removed the LI items and just left the links.</p>
  
  <p>Thanks all!</p>
  
  <p>Here's all my various code...</p>
  
  <p>Javascript (for IE):</p>
  
  <pre><code>jQuery(document).ready(function() {
      jQuery('#arrow').click(function(){
          jQuery(this).hide('slide',{direction:'left'},200, function() {
              jQuery('.menu-main-container').show('slide',{direction:'left'},500);
              jQuery('.menu-main-container li a').show();
          });
      });
  jQuery('.menu-main-container').mouseleave(function(){
      jQuery('.menu-main-container').hide('slide',{direction:'left'},500, function(){
          jQuery('#arrow').show('slide',{direction:'left'},200);
          });
      });
  });
  </code></pre>
  
  <p>And here's the HTML its trying to act on (stripped down to just one LI):</p>
  
  <pre><code>&lt;div id="home-nav"&gt;
      &lt;div id="arrow" style="display: block; "&gt;
          &lt;img src="http://actionfreightinc.kemdev.com/wp-content/themes/thesis_18/custom/images/menu2.png" alt="Menu"&gt;
      &lt;/div&gt;
      &lt;div class="menu-main-container" style="display: none; "&gt;
  &lt;ul id="menu-main" class="menu"&gt;&lt;li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-5"&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;&lt;/div&gt;                
      &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's my CSS (theres some other rules being applied from other areas, but this is the gist of it):</p>
  
  <pre><code>        .custom #home-nav {
          margin: 0;
          padding: 20px 0 20px 0;
          position: absolute;
          left: 10px;
          top: 50px;
          z-index: 600;
      }
  
      .home .menu-main-container {
          background: transparent url(images/home-nav-bgd.png) no-repeat right bottom;
          margin: 0;
          display: none;
          width: 200px;
          /*float: left;*/
          padding-bottom: 20px;
          padding-right: 0;
          padding-left: 0;
          padding-top: 0;
          z-index: 601;
          position: absolute;
          left: 0;
  
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
  
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      border-radius: 0px;
  
      behavior: url(PIE/PIE.htc);
      }
      .home .menu-main-container #menu-main {
          background: transparent url(images/home-nav-bgd.png) no-repeat right top;
          padding: 20px 20px 0 20px;
          margin: 0;
          width: 160px;
          z-index: 602;
      }
      .home .menu-main-container #menu-main a {
          width: 140px;
          font-size: 1.6em;
      }
  
      .home #arrow {
          position: absolute;
          left: 0;
          background: none;
          width: 38px;
          height: 255px;
          display: block;
          padding: 0;
          cursor: pointer;
      }
  
      .custom #home-nav .sub-menu {
          left: 140px;
          top: 0;
          background: #FFF;
          padding: 20px;
          width: 140px;
  
      -webkit-box-shadow: 0px 0px 4px 0px #000000;
      -moz-box-shadow: 0px 0px 4px 0px #000000;
      box-shadow: 0px 0px 4px 0px #000000;
  
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
  
      behavior: url(PIE/PIE.htc);
      }
      .custom #home-nav #menu-main .sub-menu li a {
          width: 140px;
      }
  </code></pre>