如何将样式应用于列表中的相邻元素

我可以只使用 CSS 来完成这个场景吗？

我有一个任意长度的元素的无序列表，这些元素排列成一个由四个元素组成的网格

**** **** **** ****
*  * *  * *  * *  *
**** **** **** ****

**** **** ****
*  * *  * *  *
**** **** ****

当用户将鼠标悬停在某个元素上时，一些附加内容将在该元素下方下拉，并将其下方的行向下推。

**** **** ---- ****
*  * *  * |^ | *  *
**** **** ---- ****
-------------------
| Content is here |
-------------------
**** **** ****
*  * *  * *  *
**** **** ****

最主要的是下拉菜单需要在宽度方向上填充父容器。我已经使用了这个方法position: absolute并拥有<ul>元素是position: relative.

我在想也许有一些东西nth-child可能会本质上为邻居设置底部边距并将下部元素向下推，但我不确定如何实现这一点。

如果可能的话，我会尽量避免使用 Javascript 来实现这一点。

Edit

这是我到目前为止所得到的一个小提琴：http://jsfiddle.net/pYw34/ http://jsfiddle.net/pYw34/

我希望这就是你想要的。

更新了小提琴 http://jsfiddle.net/vals/pYw34/1/

然而，这并不是一个简单的规则：

.about__list__item:nth-child(4n):hover:after,
.about__list__item:hover + .about__list__item:nth-child(4n):after,
.about__list__item:hover + .about__list__item + .about__list__item:nth-child(4n):after,
.about__list__item:hover + .about__list__item + .about__list__item + .about__list__item:nth-child(4n):after
{
    content: '';
    float: left;
    display: block;
    width: 100px;
    height: 90px;
    background-color: yellow;
} 

我将元素设置为黄色来跟踪它，当然该元素应该是不可见的。