Question

I have a list like as follows:

<li class="top" style="position: relative;" >
<a href="#">parent</a>
<ul class="toshow" style="display:none;position :absolute; " >
<li><a  href="#">child1</a></li>
<li><a  href="#">child2</a></li>
<li><a  href="#">child3</a></li>
<li><a  href="#">child4</a></li>
</ul>
</li>

and then I have this jquery code for handling the hover and showing the sub items:

$(document).on({mouseenter: function () {$(this).find('.toshow:first').show("slide", { direction: "left" }, 600,function(){});},
    mouseleave: function () {$(this).find('.toshow:first').hide("slide", { direction: "right" }, 400);}
    }, '.top');

it works fine on every browser but IE (mine is IE8)
the problem is when mouse cursor enters the space between the child items. it acts like it is out of the parent node.

it seems that even after the size of the parent is changed IE does not consider the size change and collapses the parent based on the previous size.

what can I do?

Answer 1

You could try setting IE8 specific CSS in the head section.

<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->

Then give the child elements a negative “top” value, so they move up and leave no gap.

ul.toshow > li {
    position: relative;
    top: -1px;
}