HoverMenuExtender does not work in IE8, IE7

Hi

I have a listview inside a hovermenu extender being used as a dropdown for categories.It works in Chrome, Firefox and IE9. It wont display in IE8, IE7 or IE9 compatibility mode and i've no idea why.I've tried databinding the listview in page load as suggested elsewhere but no effect.Any ideas?

<asp:HoverMenuExtender ID="hme2" runat="Server" TargetControlID="Hyperlink1"
            PopupControlID="Panel2" PopupPosition="Center" OffsetX="5" OffsetY="28" />
            
            <asp:Panel ID="Panel2" runat="server" CssClass="popupMenu" >
            <asp:ListView ID="ListView2" runat="server" 
               DataSourceID="CategoryDataSource">
            <LayoutTemplate>
                    <div class="AccBox">
                        <ul class="itemContainer">
                            <li id="itemPlaceHolder" runat="server"/>
                        </ul>
                    </div>
            </LayoutTemplate> 
            <ItemTemplate>
                 <li>
                 <a href='<%#VirtualPathUtility.ToAbsolute("~/ProductList.aspx?CategoryID=" + Server.UrlEncode( DataBinder.Eval(Container.DataItem,"CategoryID").ToString()))%>'> <%# Eval("CategoryName")%> </a>
                 </li>
            </ItemTemplate>
            </asp:ListView>
            <asp:SqlDataSource ID="CategoryDataSource" runat="server" 
                ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
                SelectCommand="SELECT * FROM [Category]"></asp:SqlDataSource>
                 
                <asp:RoundedCornersExtender ID="CategoryDataSource_RoundedCornersExtender" 
                    runat="server" TargetControlID="Panel2">
                </asp:RoundedCornersExtender>
                 
        </asp:Panel>

Css

.popupMenu 
{
   display:none;
}
.AccBox
{
    list-style:none;
    background-color:#013a81;
    float:left;
    position:relative
}

.itemContainer
{
    width: 120px;
    font-size: 14px;
    color:#013a81;
    float:left;
    margin:0;
    text-align:left;
    
}
.itemContainer ul
{
      list-style-type: none;
   
      margin:0;
      padding:0;
      text-align:left;
}
.itemContainer li
{
   height: 20px;
    width: 100px;
  
    margin:0;
    padding:0;
    text-align:left;
}

.itemContainer li span
{
    width : 80px;
    float: left;
    border:solid 1px #000;
}