title: Superfish not working in IE 6-9
body: <p>I have a WordPress website where it uses a Superfish menu. The menu works fine in Chrome, Firefox, and IE 10-11 but it doesn't show the sub-menus in IE 6-9. The sub-menus seem "transparent" in IE 9. I have searched Google for solutions but none of them seem to work.</p>
  
  <p>Methods I have tried:</p>
  
  <ul>
  <li>Removing filters (couldn't find any)</li>
  <li><code>z-index: 9999999</code> on sub-menus</li>
  <li><code>z-index: -1</code> on overlapping elements</li>
  <li><code>visibility: visible; overflow: visible; opacity: 1</code> on sub-menus</li>
  <li>Added <code>&lt;meta http-equiv="X-UA-Compatible" content="IE=Edge" &gt;</code></li>
  <li>Updated to latest version of Superfish</li>
  </ul>
  
  <p>Here's what I have in style.css which superfish.css overwrites:</p>
  
  <pre><code>.menu-main-container {
      background: #60ac5f; /* Old browsers */
      background: -moz-linear-gradient(top, #60ac5f 0%, #3a7539 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#60ac5f), color-stop(100%,#3a7539)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #60ac5f 0%,#3a7539 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, #60ac5f 0%,#3a7539 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top, #60ac5f 0%,#3a7539 100%); /* IE10+ */
      background: linear-gradient(to bottom, #60ac5f 0%,#3a7539 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60ac5f', endColorstr='#3a7539',GradientType=0 ); /* IE6-9 */
      position: fixed !important;
      top: auto !important;
      z-index: 151 !important;
  }
  
  #menu-main {
      position: relative;
  }
  
  #menu-main li {
      background: transparent !important;
  }
  
  #menu-main li a {
      font-size: 17px;
      font-weight: 400 !important;
      font-family: "Open Sans";
      border: none;
      padding: 0.46em 1em;
  }
  
  #menu-main a:focus, #menu-main a:hover, #menu-main a:active, #menu-main .current_page_item, #menu-main li:hover, #menu-main li.sfHover {
      outline:        0;
      background: none repeat scroll 0 0 #E79E38 !important;
  }
  
  #menu-main li:hover ul, .menu li.sfHover ul {
      top: 43px !important;
  }
  
  #menu-main ul {
      z-index:999 !important;
  }
  
  #menu-main li ul li a{
      font-size: 15px !important;
  }
  
  #menu-main li li {
        background: none repeat scroll 0 0 #E79E38 !important;
        border-bottom: 1px solid #BF711C !important;
  }
  
  #menu-main li ul li a:hover {
      background: none repeat scroll 0 0 #DC8122 !important;
  }
  </code></pre>
  
  <p>The website: <a href="http://tinyurl.com/oyxgnmk" rel="nofollow">tinyurl.com/oyxgnmk</a>.</p>