Horizontal Menu with Dropdowns not working in IE7

I have a horizontal menu with dropdowns that isn't working properly in IE7. The menu and dropdowns display properly, however if you try to mouse over any of the dropdown items, the menu goes away!

Any help would be greatly appreciated!

Menu is here: www.gateslodge.com

Hiya Greg,

The menus are working fine for me here - tested on IE6, IE7, IE8, Firefox.

I'm on Vista (not that that should make a difference!). Is there a particular page/menu item that isn't working that I could check? Weird - all seems good.

I have a separate computer set up with Windows XP and IE6 and 7. The dropdown menu items in IE7 disappear when the mouse hits the 'border' between the items.

I have received three emails from people that they are experiencing the same thing, and in all cases they have Windows XP and IE7 (I asked, and 2 of them are at work on company networks)

I also signed up for a trial at crossbrowsertesting.com, as you can connect to a live system for testing with them... In the Windows XP SP2 and IE7 environment, the same issue occurs... horizontal menu dropdowns disappear when you try to mouse over them.

Let me know if there is any further information I can provide to help find a solution...

Thanks!

I took a look at the site and don't see the menus disappearing when I mouse over them in IE8 or IE7.

Well, I'm not sure what to say... I have now verified for myself that the issue occurs in IE7 on both a Windows XP SP2, and a Vista machine!

I've also checked crossbrowsertesting.com, and the issue occurs in the same places as well.

I've also downloaded IE Tester (free at: HomePage) and if you check IE7, the same thing happens... the dropdowns in the horizontal menu disappear when you try to mouse over them!

If 'anyone' has any idea what is going on... I would greatly appreciate the assistance!

Thanks in advance!

Again, the website is www.gateslodge.com (check the dropdowns under Fly Shop, or Learn)

Hi Greg,

That is a real mystery. I tried it again in Win XP IE6/7 - and both still OK here.

The only way I could see your problem was in the free IE tester you linked to; the IE7 tab showed the fault you described.

On that screen, the disappearing menu could be seen to vanish at the point the mouse leaves one menu item on its way to another (child) item, - but there is no gap whatsoever, so I can't think of a reason why the menu should vanish. Usually, even when there is a gap that causes this to (understandably) happen, if you 'twitch' the mouse/cursor fast enough to bridge the gap, it is will nearly always still be possible to keep the menu open - at least once in a while.

As well as the effect happening at the edge of the menu item, it also (coincidentally?) happens just as the mouse/cursor edges over the flash/swf display you have just under the menu.

If you have the site still in Dreamweaver, could you try duplicating the page, and upload the duplicate page without the flash swf on the page? I would like to rule out that coincidental connection.

If the menu now works OK in IE7 XPsp2, try changing the wmode parameters in the flash code (x2) from 'opaque' to 'transparent'.

As you can guess, I'm just fishing in the dark here - but am a bit intrigued to find out what the problem is!

First off, the error occurs on page that do not have any Flash on them at all... but just for the heck of it, I tried what you suggested and removed the Flash object from the home page. It didn't make any difference. I then changed the wmode to transparent, and again, that didn't make any difference.

I checked all of these in crossbrowsertesting.com and using IE Tester using IE7 on WinXP SP2 and Vista machines.

I've also received more emails today from people complaining that the dropdowns disappear for them... so now I'm getting nervous!

One person emailed me something interesting... they found that if the moused over a menu item and waited for the dropdown to appear, then RIGHT clicked (the cursor changes to a circle with a slash symbol) and moved the mouse down over the dropdown menu items, they could then release the right mouse button, and were able to left click to select the item.

I tried this, and it does work, but I also noticed something interesting... If you did this, you had to end up DIRECTLY on the TEXT of the menu item. If you let go of the right mouse button, or if you moved the regular cursor even slightly off of the TEXT, the menu disappears. So, at least this tells me that it's not just a 'border' issue. The problem is that IE7 (at least for me and an increasing number of others) isn't 'seeing' the background behind the dropdown menu items.

My next course of action (unless someone has a better suggestion), is to remove the background 'image' for the menu items that I'm using, and just use a solid color.

I'll post my results as soon as I am able... although it may not be until tomorrow night...

In the meantime, if anyone has ANY other suggestions, I'm all ears!!

Made a new discovery, although I'm still not sure what the solution is...

I created a test page at test2.php and if you use IE Tester to view it you'll easily see what is happening. I moved the horizontal navigation up just a bit from it's 'normal' location at the bottom of the header.

Now, if you mouse over any dropdown item that is within the 'bounds' of the header div, everything is ok... but as soon as you mouse over a menu item that is outside of the header div, the menu disappears!!

I have the Menu Writer menu within an absolutely positioned div that is then contained within a relatively positioned header div... is there some weird IE7 bug rendering bug that doesn't like this?? And why does it work on some IE7 machines, and not others??

Anyone have any ideas on a solution??

Hi Greg,

Ta for listing the steps you took, and thus providing the clue, which was in the fact that the menus only stayed open when hovering over the text; so, if I may be so bold, EURIKA - I have it.

It should have ocurred to me earlier - IE7 is very fussy about having to have heights/widths stated in exact units (not %, not 'auto') There was nothing defined in the CSS to tell IE7 that there was actually a menu item there - apart from the text (which it saw because it was defined in the CSS) - as there was no width and height for the Level-1 menu items. They were effectively invisible to IE7.

In your final pages, check which stylesheet is being referred to, (in the test2.php page it is 'cssmw1' - see the line : <ul class="level-0" id="cssmw1"> )

and either change the menu.css for that page's menu (CSSMenuWriter/cssmw1/menu.css) Line 107-ish onwards:

ul#cssmw1 ul.level-1 > li > a, ul#cssmw1 ul.level-1 > li > a:link {
        background-color: #f0b478;
        background-image: url("../cssmw1_images/topNavDropdown.jpg");
        background-repeat:repeat-y;       /*   Add this line   */
        border-bottom: solid 1px #f0b478;
        border-right-style: solid;     /*   Remove this line    */
        color: #644b32;
        display: block;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: .7em;
        font-style: normal;
        font-weight: bold;
        margin: 0 0 0 0;
        padding: 5px 5px 5px 5px;
        text-decoration: none;
        width: auto;       /*   Change this to width:150px;   */
        height: 15px;       /*   Add this line   */
        outline-style: none;
}

or change the appropriate IE conditional statement in the head tags to include IE7 (currently all lte IE6) :

<!--[if lte IE 7]>
<style type="text/css" media="all">
@import url("CSSMenuWriter/cssmw1/menu_ie.css");
</style>

<![endif]-->

ul#cssmw1 ul.level-1 > li > a, ul#cssmw1 ul.level-1 > li > a:link {
        background-color: #f0b478;
        background-image: url("../cssmw1_images/topNavDropdown.jpg");
        background-repeat:repeat-y;       /*   Add this line   */
        border-bottom: solid 1px #f0b478;
        border-right-style: solid;     /*   Remove this line    */
        color: #644b32;
        display: block;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: .7em;
        font-style: normal;
        font-weight: bold;
        margin: 0 0 0 0;
        padding: 5px 5px 5px 5px;
        text-decoration: none;
        width: auto;       /*   Change this to width:150px;   */
        height: 15px;       /*   Add this line   */
        outline-style: none;
}

That will sort it.

Thanks neilo! I'll try implementing the changes later today when I'm back at my home office. Although, I'm still curious... any idea why the menu works for some people using IE7 and not others?? It seems to me that it would be all or nothing if it was related to the IE7 rendering engine...