Is It Possible To Display A Child Element Over A Parent's Y-scrollbar Using Css?

I have a selection box built with

and
• elements. Some list items are wider than the parent box, so I added an :after pseudo-element to overlay them with the fu

Solution 1:

I seem to achieved the affect you are after. It seems a little 'jittery' but perhaps this is a good starting point for you.

I contained the list within a div with the overflow-y set to scroll. I then set the position of the li to absolute on hover with an increased z-index. Changing the z-index seems to cause the 'jitteryness'. This worked in Chrome.

Have a look - http://jsfiddle.net/x9TZB/17/

css changes

li:hover{z-index:1;position:absolute;}
#listContainer{z-index:0;width:150px;height:200px;border:1px solid red;overflow-y:scroll;overflow-x:visible;}

UPDATE: This works without the containment div. Just remove the div from the above fiddle.. Also tested it in IE9 and seems to work OK too.