Michael Lunsford

I must say, your tutorial on pure CSS menus is awesome. I made a few slight
modifications (to make it display horizontally), which may also be
contributing to the IE7 challenge.

What's happening (in IE7 only) is the popup sub-menu appears on :hover (like
it's supposed to), but when mousing down below the second sub-option, the
sub-menu disappears.

My best guess is IE7 is not seeing the nested <ul> as part of the parent
<li>. When the mouse travels outside the parent <li>'s height, the nested
<ul> reverts back to display:none;

here's a link to the menu in isolation:
[URL]

Hope you can get it, the number of CSS gurus I showed it to are all stumped.

Per your instructions, here is a list of the browsers I tested in:

Macintosh (they all work fine):
Safari
Camino
Firefox
Flock
IE 5.2
Mozilla
Opera
Seamonkey

Windows:
IE6 (doesn't work at all -- but it's not supposed to)
IE7 (kind of works)

Thanks!
Michael Lunsford

odd, I never received your reply via email -- so I'm replying to the reply
posted on your "recent email" web page.

well, your note about "falling through" was the clue I needed to figured it
out. I just snuggled the elements up to each other using negative margin,
and presto.

<!--[if gt IE 6.9]>
<style type="text/css">
/* don't know how to ask if it's IE7, but this seems to do the trick */
ul.menu ul {
  display: none; position: absolute; top: 2px; left:0; /* changes from
default css, fixes a dramatic right shift for me, but may be irrelevant for
you */
}
ul.menu ul li {
    margin-top:-3px; /* snuggle the elements up against each other to remove
holes the pointer could "fall through" */
}
</style>
<![endif]-->

Well, that's it. All browsers are happy now :-)

Thanks for the great site and your help!