CSS Overflow Property / Div mouseover problem - IE & Chrome

Question

I have a div inside a main div having following properties:

#inner {
width:149px;
overflow:auto; //Note this
margin:35px 0 0 0;
height:575px;
display:none;               
}

on main div I am calling two functions on two events (onmouseover & onmouseout). On mouseover inner div displays with scrollbars. It seems whenever the mouse is moved off the scrollbar into the DIV after it being scrolled down, the DIV returns to the top. You can find the code here: [a link] http://www.designworks.com.pk/example/

Please test in IE & chrome when we scroll down the DIV returns to the top. Please help me to solve this issue.

Answer 1

I don't have time to fully investigate it at the moment, but I believe it is caused by one of the strange behaviors of mouseover/mouseout that occur with child elements.

If jquery is an option, using hover deals with a lot of these issues and seems to fix your problem:

http://jsfiddle.net/ZJBXX/13/

EDIT: Note this is working off of the fiddle posted in the comments and may not be exactly the same as your current code.