Child elements doesn't always hide properly

What steps will reproduce the problem?

1. Create a nested set of ul elements (a menu), e.g.:
<ul><li><a href=#>Item 1</a>
  <ul><li><a href=#>Item 1.1</a>
    <ul><li><a href=#>Item 1.1.1</a></li></ul>
  <li><a href=#>Item 1.2</a></li></ul></li>
<li><a href=#>Item 2</a>
  <ul><li><a href=#>Item 2.1</a></li></ul></li>
<li><a href=#>Item 3</a></li></ul>

2. Use this CSS:
ul,li{float:left;position:relative;background:lightgrey;}
li>ul {display:none;position:absolute;top:100%;left:0;}
li>ul ul {top:0;left:100%;}
li:hover>ul {display:block;}

3. Hover 'Item 1', then hover 'Item 1.1', then 'Item 1.1.1', then 'Item 2',
then back to 'Item 1'.

What is the expected output? What do you see instead?
The dropdown under 'Item 1' should be visible. Other submenues should not
be visible.
Instead the ul element belonging to 'Item 1.1' is visible (but not it's sub
elements) in addition to the expected visible dropdown.

What version of the product are you using? On what operating system?
.../trunk/lib/IE8.js rev 29
WinXPSP2

Please provide any additional information below.
See attached example document.

Original issue reported on code.google.com by svar...@gmail.com on 8 Apr 2008 at 11:04

Attachments:

test.php

gehuangyi20 / ie7-js

Child elements doesn't always hide properly #64