2

I am at my absolute wits end. First, my website.

http://mojooutdoors.dreamhosters.com

if you hover over the menu in any browser that is not IE, it works fine. The drop downs are displayed right underneath the menu item, and all is fine. However! IE, being IE, decides that this is unacceptable, and displays the dropdown menu right on top of the menu item.

I've read everything from deleting/modifying the following java:

if(Spry.is.ie)
    {
        this.addClassName(items[i], this.isieClass);
        items[i].style.position = "static";
    }

to changing the following IE hack in the css sheet:

@media screen, projection
{
    ul.MenuBarHorizontal li.MenuBarItemIE
    {
        display: inline;
        f\loat: left;
        background: #FFF;
    }
}

I have changed the javascript position to other things, which resulted in the dropdown menu displaying halfway down the page. The CSS IE hack seems to have no effect.

Can someone please help me? I can't find a solution anywhere on the internet (and not for lack of trying) and I've found nothing.

Thank you, anyone that responds!

Russ Toms
  • 67
  • 1
  • 1
  • 6

1 Answers1

0

This is maybe you're solution ?

@media screen, projection
{
    ul.MenuBarHorizontal li.MenuBarItemIE
    {
        display: block;
        float: left;
        background: #FFF;
    }
}

and maybe try the if IE function.

<!--[if IE]>    
@media screen, projection
{
    ul.MenuBarHorizontal li.MenuBarItemIE
    {
        display: block;
        margin: 10px 10px 10px 10px;
        float: left;
        background: #FFF;
    }
}
<![endif]-->

And edit the margin untill its on its place ?

Dave Piersma
  • 81
  • 8