This problem is in IE7 only (much worse situation in IE6 that I'll deal with later).

On the main page, when you hover over the menu and get the drop downs, if you move your cursor so you're also over the text div in the background, the menu goes away. You can tell easiest when viewing the "Community" and "Help" lists. On the product display page is the same thing over a larger area. Anytime you move the cursor to a part of the menu that's covering the text or (only some of?) the background div, it disappears. The menu is obviously on top, and this problem does not occur in basically any other browser.

It's most easily seen on two pages. The front page, here:

...and on the product pages here:

I don't exactly what code I would need to post for this, I was just hoping for some general information that could point me in the right direction. These menus will be longer later on, so the problem with become more severe as well unless I get it figured out.

NOTE: There is some mature language on this site, just FYI

2 answers


This is a stacking order problem:

<div id="header_wrap" style="position: relative; z-index: 20; width: 100%; background-image: url(images/bg_sto_headbrick.jpg); background-repeat: repeat-x; height: 175px;">

sits below

<div id="pagecontent_wrap" style="width: 100%; position: relative; top: 15px;">

This results in that the Welcome to Skulcrow image overlaps AND sits above the lower menu items of Community (Submit shirt designs, Skulcrow blog), help and other stuff

a few things to try:

  • set the mouseover on the li-element, not the a-element for the menu items, or
  • give the a-element a display: block and width: inherit, so that they are as wide als the li-element, or
  • give pagecontent_wrap a low z-index; eg 10, or,
  • in html, place pagecontent_wrap above header_wrap and rearrage their position using css

Hope this helps,


Answered over 8 years ago by stefbourdon

Thanks for the reply, sorry I didn't get a chance to try some of your suggestions until today (a bit overloaded right now).

I may be wrong (this was my first css menu) but I think the mouseover is already on the li element, located in the sto_specific.css file:

/* Hover behavior */
div#menu_site ul ul,
div#menu_site ul li:hover ul ul,
div#menu_site ul ul li:hover ul ul
{display: none;}

div#menu_site ul li:hover ul,
div#menu_site ul ul li:hover ul,
div#menu_site ul ul ul li:hover ul
{display: block;}

There was a color property added to the a:hover element as well, would having the separate hover behaviors affect this somehow?

I added block and width:inherit to the a element, but it didn't seem to change anything.

Also played around with various z-index values for the pagecontent as well as some of the nested divs to see what I could come up with. The only actual result I got was when the actual introductory text (contained in "intro_textwrap") was given a negative z-index while the other divs in the introduction were given no z-index, the text loaded in underneath the introduction background, and the menu behaved properly. Because of this, I think the problem is coming from IE7 wanting to change the cursor to a text cursor when overtop of the text area which apparently turns off the hover event.

Of course, I'm absolutely no css expert so this may not be it at all. But it must be something to do with placing text directly underneath the hover area.

I'm working on swapping the head and body contents around to test this out, however I'm thinking that the menu isn't being stacked below the introduction, but something to do with the way IE7 handles 'text hovering' (is that what you'd call it?).

Answered over 8 years ago by Dave Coykendall