(Sorry about the double copy, Ingo. I accidentally replied to sender
the first time instead of to list.)
On Tue, Jun 17, 2008 at 10:07:57PM +0200, Ingo Chao wrote:
> All subsequent <li> will be placed above the submenu, since these <li>
> are coming later in the source.
> The generic approach to fix that problem is to set position:relative on
> li:hover only. By doing this, the subsequent <li> will not be placed
> above the hovered <li> in question, because only this li is positioined
> and gets a higher rank in the painting order.
> Did you try that?
Not until you suggested it, as all I've read has stated that IE6 only
supports :hover on a tags, implying that anything on li:hover would be
While this has resolved the z-order issue, it caused a new set of
- In IE, the submenus are now positioned absolutely rather than relative
to their parent items. Additional spacing (blank lines) has also
appeared after submenu items containing a tags.
- In Firefox, submenu items now jump to the right when moused over.
These changes are currently viewable at the previously-mentioned URL,
 I've determined that the additional spacing is due to my having set
display:block on a tags so that the entire line will highlight on
mouseover rather than just the text portion. Based on your initial
suggestion, I tried moving the background-color change from a:hover to
li:hover, but, while IE6 may recognize position:relative in li:hover,
changing background-color in li:hover has no apparent effect.
Setting display:block only in a:hover was also unsatisfactory, as it led
to the gaps appearing on mouseover, causing subsequent menu items to
jump around. Setting a's margin, padding, and border to 0 along with
display:block produced no discernable change in the undesired spacing.
News aggregation meets world domination. Can you see the fnews?
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/