IE7 CSS drop down menu/li:hover bug?

Displays blank <li>s next time I mouse over

[authortitle]

I've constructed a site with CSS drop down menus, built from scratch. I've pasted some example HTML/CSS at the end of this post.

The problem I am experiencing is that IE7 doesn't seem to remember to hide the third level menu (i.e. ul > ul > ul) next time I open the menu if the mouse is over an li which contains a submenu. For example, if I mouse over "Clothing", then "Mens" from that submenu, a second submenu is displayed. If I leave the mouse over "Mens" then move it away to close the menu, the menu disappears as expected, but on mousing back over "Clothing", the third submenu remains visible, but blank - the li's have their dimensions and background but no text. Likewise, if I mouse over "Womens", then move away so "Womens" was the last li I "touched", the "Womens" submenu is visible but blank next time I mouse over "Clothing". (Hope that makes sense)

I plan on trawling through the code as I'm sure I've seen this work elsewhere but was hoping someone else had a quick fix ;)

Cheers,
Tom

Example code:

HTML:

<ul id="top-nav" class="nav">
  <li id="top-nav-clothing"><a href="#">Clothing</a>
  <ul>
   <li><a href="#">Mens</a>
   <ul>
     <li><a href="#">Shirts / Tops</a></li>
     <li><a href="#">Test</a></li>
   </ul>
   </li>
  </ul>
  </li>
</ul>

CSS:

#top-nav ul
{
  position:relative;
}
#top-nav ul, #top-nav ul ul
{
  display:none;
}
#top-nav ul
{
  position:absolute;
  width:133px;
  list-style:none
}
#top-nav ul ul
{
  position:absolute;  
  left:130px;
  list-style:none;
  top:0;
  font-weight:normal;
}
#top-nav li:hover ul
{
  display:block
}
#top-nav li:hover ul ul
{
  display:none
}
#top-nav ul li:hover ul
{
  display:block
}

[edited by: authortitle at 6:47 pm (utc) on Oct. 1, 2007]

[authortitle]

Just noticed, if I remove position:absolute from the #top-nav ul.second-submenu second-submenu, this doesn't occur, but instead the first submenu "makes room" for the second submenu, so is useless... Hmm, maybe a clue though

[Drag_Racer]

couple of things I see not quite right.

your first declarations,

#top-nav ul
{
position:relative;
}

then two declarations later,

#top-nav ul
{
position:absolute;
...

Not the cause of the problem, but needs fixing.

Possible your trouble lies with your declaring the display:none; on the UL tag without the LI tag, but display:block; on the UL tag with LI tag with the :hover pseudo. You would think it wouldn't matter, but try it to be sure. If you declare something to be a block element, make sure you hide it with exactly the same declaration.

If that doesn't fix it, make sure you have a width or height defined for the LI tags, it may be a 'has layout' bug problem.

You would also want to back things up with javascript events as not all browser versions support the :hover on LI tags.

[authortitle]

Thanks for the response. I tried what you suggested without much luck, though I may have misunderstood. Anyway found a solution that'll do:

In IE7 conditional CSS, I disable the sub-submenu hovering:

#top-nav ul li:hover ul
{
display:none
}

and re-enable for IE6 in its conditional CSS with:

#top-nav ul li:hover ul
{
display:block
}

Then using a little bit of Jquery, I fix IE7 like so:

if(isIE7)
{
$('#top-nav li.has-submenu').mouseover(function()
{
$(this).children('ul').css('display','block');
}
);

$('#top-nav li.has-submenu').mouseout(function()
{
$(this).children('ul').css('display','none');
}
);
}

Not that elegant but it works and that's all I need :) Cheers for the help