How to apply styles to neighboring elements in a list

How to apply styles to neighboring elements in a list

Can I accomplish this scenario using only CSS?
I have an unordered list of elements of arbitrary length that lay out into
a grid of four elements across
**** **** **** ****
* * * * * * * *
**** **** **** ****
**** **** ****
* * * * * *
**** **** ****
When a user mouses over an element, then some additional content will
dropdown below the element and push the rows below it down.
**** **** ---- ****
* * * * |^ | * *
**** **** ---- ****
-------------------
| Content is here |
-------------------
**** **** ****
* * * * * *
**** **** ****
The main thing is that the dropdown needs to fill up the parent container
width-wise. I've done this using position: absolute and having the <ul>
element be position: relative.
I was thinking that maybe something with an nth-child might work to
essentially set the bottom margin for the neighbors and push the lower
elements down, but I'm not sure how to accomplish this.
I'm trying to avoid resorting to doing this in Javascript if possible.
Edit
Here's a fiddle of what I've got so far: http://jsfiddle.net/pYw34/