我可以只使用 CSS 来完成这个场景吗?
我有一个任意长度的元素的无序列表,它们排列成一个由四个元素组成的网格
**** **** **** ****
* * * * * * * *
**** **** **** ****
**** **** ****
* * * * * *
**** **** ****
当用户将鼠标悬停在元素上时,一些额外的内容将下拉到元素下方并将其下方的行向下推。
**** **** ---- ****
* * * * |^ | * *
**** **** ---- ****
-------------------
| Content is here |
-------------------
**** **** ****
* * * * * *
**** **** ****
主要的是下拉菜单需要按宽度填充父容器。我已经使用元素 be 完成了position: absolute
这项<ul>
工作position: relative
。
我在想,也许有一个nth-child
可能的东西基本上可以为邻居设置底部边距并将较低的元素向下推,但我不确定如何实现这一点。
如果可能的话,我试图避免在 Javascript 中这样做。
编辑
这是我到目前为止所得到的一个小提琴:http: //jsfiddle.net/pYw34/