Superfish will not display in IE8

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.

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.

Any ideas what could be causing it? I'm also using the supersubs plugin for superfish.

Here is the css:

#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;
}

Here is how it's going on the page:

<div id="navbar">       
   <ul class="topnav">
      <li id="item 开发者_运维技巧1"><p></p>
         <ul class="subnav"></subnav>
      </li>
      <li id="item 2"><p></p>
         <ul class="subnav"></subnav>
      </li>
      etc...
   </ul>
</div>

---

Not sure if this will address the problem you're seeing, but I noticed in your html snippet that the UL elements with the subnav class aren't being closed with an appropriate tag. First thing I'd try is replacing them with:

<ul class="subnav"></ul>

Any other errors may not be being handled by IE8 as graciously as other browsers. Try running your page through a validator (ie: The W3C Markup Validator)