Fly out menu problem in IE

[DougWest]

I am having GREAT difficulty resolving a problem with an unordered list navigation menu on a site which can be found at csl.chemicalsolutionsltd.com. The navigation menu in the upper right renders perfectly in Firefox and Safari on the Mac and PC, but is not fully functional in Internet Explorer on the PC. The 3rd level flyout menu does not display in Explorer. The site was developed in WordPress utilizing the Amphawa theme, for which I can get no support. I am relatively new to WordPress, but the code seems rather bloated to me and the inter-relation of files somewhat cumbersome. I am really having trouble wading through it, especially since I am not really a css master either. (I am sure this will be apparent when you look at the style sheet.)

To view the css for the site go to http://csl.chemicalsolutionsltd.com/wp-content/themes/Amphawa/css/screen.css?ver=1.0. At the bottom of the css is code which I have added under the note “/************************DHW ADDITIONS*****************/” This was done to customize the menu and to add the third level, which did not seem to be supported by the original css.

If you need additional background or information on the situation, please let me know and I will be happy to supply it. I have literally been studying this issue for weeks without any luck. I have researched the problem on other forums and and web, but have not found the key to unlock the problem. Thanks, in advance, to any suggestions anyone might have. Appreciatively.

[Senff]

I think the easiest fastest solution would be to give your LI’s a specific width. Since the code is so bloated already anyways, might as well go for the quick shortcut. Try adding this to your stylesheet:

#menu_wrapper ul li#menu-item-102 {width:50px;}

#menu_wrapper ul li#menu-item-99 {width:80px;}

#menu_wrapper ul li#menu-item-97 {width:80px;}

#menu_wrapper ul li#menu-item-96 {width:75px;}

Play around a little bit with the widths to see what looks best.

[DougWest]

Thanks. I will try that, although I believe I have tried to add widths in the past without any luck. I was under the impression this might have something to do with a problem with li:hover in IE. To be honest, I don’t know why these problems always seem to occur with Explorer. I develop on the Mac, which no longer supports IE, and more often than not things look fine in Firefox and Safari, but when I finally view them on a PC in IE, the fun almost always begins.

[Senff]

Well, most of the time, it’s the code, not IE itself. ;)

http://www.senff.com/front-end/browsers/ie-deserves-more-love/

[DougWest]

I added the following to the css as a test:
li#menu-item-123 {width:180px}

(see last line of http://csl.chemicalsolutionsltd.com/wp-content/themes/Amphawa/css/screenDHW.css?ver=1.0)

No change in IE. The flyout still does not appear as it does in every other browser I tested.

Thanks for the idea. Any other suggestions?

[Senff]

With that code, you assign a width of 180px to a sub-sub-menu item of WHO WE ARE. You have to assign it to the main level menu.

[DougWest]

So, I changed the css to what I think you had originally suggested:

#menu_wrapper ul li#menu-item-123 {width:180px;}

Still not flyout. Am I misunderstanding your point?

I chose menu-item-123 because that is the first flyout menu (Vision. Mission. Value) which is a sub-menu of Who We Are, which is a drop down sub-menu of About Us.

Thanks for hanging in there with me on this. I just cannot seem to resolve this problem.

[Senff]

Try adding the code that I pasted in my first reply. The widths should not be applied to the flyout submenus, but the level 1 items.

Then again, maybe I misunderstand your issue. What I thought was that the top level menu items (HOME, ABOUT US, EXPERTISE) were moving to the left once you hover, but I also see that the level 3 items are placed way too low in IE.

[DougWest]

I added the code as you suggested and it did apply the widths to the level 1 items. It did not have any affect on the visibility of the 3rd level flyout menus, however. When you hover over the 1st level About US and then hover over the second level Who We Are in the 2nd level drop down, the 3rd level Vision. Mission. Value. and Staff menus do not flyout as they do in Firefox.

I have been trying various things and I still believe it may have something to do with li:hover as interpreted by IE. I understand that the problem is in the css code, but I do not understand why every other browser seems to interpret the code so that the flyouts display properly. The problem only exists with IE.

I realize that I am not a css wiz, but I am at about my wits end on this one. Thanks again for your help.

[Shalla]

Is there a reason you’re using margins to position the 3rd level menus? I’d using positioning instead of margins, just to see if it works.

#menu_wrapper ul ul li {
position:relative;
}
#menu_wrapper ul ul ul {
position:absolute;
top:-55px;
left:180px;
}

[DougWest]

Thanks Shalla. I tried positioning as you suggested and the 3rd level flyout menus still do not appear. Sorry.

[Author]

Posts