Hi all,

i have a joomla based website (www.vaxilbio.com) with which i use superfish menu. 

i have 7 items on the main menu and i used the superfish css file to create rollover effects for them. for the first 6 items i used the sfHover class for the rollover but for some reason the last item on the menu dont get the sfHover class on mouseover so i had to use some css trick, attaching the rollover effect to "a:hover" state instead of sfHover.

problem is, this new code is causing IE6 to crash (see attached image).

any idea why?

i tried to attach my .css file but thats not allowed instead i will give code examples for how i defined one of the first 6 menu items and how i set up the 7th (which is the problematic one)

/////////// setting up item 6///////////

.sf-menu li.parent.active.item6  {
    width: 178px;
    background-image: url(../images/menu_item6.png);
    background-repeat: no-repeat;
    text-indent:-9999px;
    background-position: 0px -91px;
}

.sf-menu li.item6 {
    width: 178px;
    background-image: url(../images/menu_item6.png);
    background-repeat: no-repeat;
    text-indent:-9999px;
    background-position: 0px 9px;
    height: 49px
}

.sf-menu li.item6.sfHover  {
    width: 178px;
    background-image: url(../images/menu_item6.png);
    background-repeat: no-repeat;
    text-indent:-9999px;
    background-position: 0px -41px;
}


.item6 ul {
    position:        absolute;
    top:            -999em;
    width:        200px;
    left:        19px;
}

.item6 ul li.last-child{
    border-bottom-width: 18px;
    border-bottom-style: solid;
    border-bottom-color: #38a000;
}

//////////////////// setting up item 7 (causes IE6 to crash)//////////////////////////

.sf-menu li.item7{
    width: 109px;
    background-image: url(../images/menu_item7.png);
    background-repeat: no-repeat;
    text-indent:-9999px;
    background-position: 0px 9px;
    height: 49px
}

.sf-menu li.item7 a:hover{
    width: 90px;
    background-image: url(../images/menu_item7.png);
    background-repeat: no-repeat;
    text-indent:-9999px;
    background-position: 0px -41px;
    height: 26px
}

, .sf-menu li.item7 a:active {
    width: 90px;
    background-image: url(../images/menu_item7.png);
    background-repeat: no-repeat;
    text-indent:-9999px;
    background-position: 0px -91px;
    height: 26px
}

.item7 ul {
    position:        absolute;
    top:            -999em;
    width:        200px;
    left:        19px;
}

.item7 ul li.last-child{
    border-bottom-width: 18px;
    border-bottom-style: solid;
    border-bottom-color: #38a000;
}

thank you all!