title: Superfish will not display in IE8
body: <p>I have an issue with superfish which makes the dropdown menu not appear at all in ONLY IE8. It shows up in everything else (even IE6) but not IE8. I didn't modify the source JS at all and I'm calling a div called "subnav" where my list is displayed. </p>
  
  <p>What SHOULD happen is when I mouse-over the menu-item, it changes the dropdown menu's CSS to "visibility: visible, display:block" and displays the menu. In IE8, nothing happens and no CSS is changed at all.</p>
  
  <p>Any ideas what could be causing it? I'm also using the supersubs plugin for superfish.</p>
  
  <p>Here is the css:</p>
  
  <pre><code>#navbar ul{
      margin:10;
      padding:0;
      width:1000px;
  }
  
  #navbar li{  
      float:left;  
      color:#191919;  
      list-style-type:none;
      text-transform:uppercase;
      background:transparent url('../images/common/layout/nav-separator.jpg') center right no-repeat;
      padding:10px 0;
  }
  
  #navbar li.last{  
      background:none;
  }
  
  #navbar ul li a{
      padding: 12px 33px;  
      color: #fff;  
      text-decoration: none; 
  }
  
  #navbar ul li a:hover{
      color:#05af0d;
      background:transparent url(../images/common/layout/nav-hover-highlight.png) top center no-repeat;
  }
  
  #navbar ul li a.hover-arrow:after{
      margin-left:10px;
      content:url(../images/common/nav-arrow.png);
  }
  
  #navbar ul li:hover a.hover-arrow:after{
      margin-left:10px;
      content:url(../images/common/nav-arrow-roll.png);
  }
  
  #navbar ul li a.hover-arrow:hover{
      background:#000 url('../images/common/layout/nav-separator.jpg')  right 9px no-repeat;
  }
  
  #navbar ul li p{
      margin:0;
      display:inline-block;
  }
  
  
  /*Sub Nav Lists */
  .subnav { 
      display:none;
      visibility:hidden; 
  }
  
  #navbar ul li ul{
      margin:0; padding:0;    
      position: absolute;   
      left: auto; top: 40px;  
      background: #333;  
      z-index: 99;
  }
  
  #navbar ul li ul li{
      background:none;
  }
  
  #navbar ul li ul li a{
      padding:0px 3px;  
      display:inline-block;
      margin:0;
      width:150px;
      text-transform:capitalize;
  }
  
  #navbar ul li ul li a:hover{
      background-color:#a7a7a7;
      color:#000;
      border:none;
      background-image:none;
      font-weight:bold;
  }
  </code></pre>
  
  <p>Here is how it's going on the page: </p>
  
  <pre><code>&lt;div id="navbar"&gt;       
     &lt;ul class="topnav"&gt;
        &lt;li id="item 1"&gt;&lt;p&gt;&lt;/p&gt;
           &lt;ul class="subnav"&gt;&lt;/subnav&gt;
        &lt;/li&gt;
        &lt;li id="item 2"&gt;&lt;p&gt;&lt;/p&gt;
           &lt;ul class="subnav"&gt;&lt;/subnav&gt;
        &lt;/li&gt;
        etc...
     &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>