怎样用CSS设计实现div相对另外一个div进行定位

我也在找怎么实现div3相对div1进行定位，之前我自己做了一个容器，让每个div3显示在div1正右边同一个位置，思路是：

每个div2和div3里面的内容都写成静态代码。

设置div3相对于div2进行独立定位position:absolute。

设置div3默认显示级别z-index:1

设置div3默认背景颜色background:#fff。

每个div3向右偏移与父div2宽度相同的数值。

每个div3向上偏移父div2相对于div1的位移值加上父div2的高度值（每个都独立设置）。

设置当鼠标移动到div2上时子div3优先显示，z-index:2。

代码如下：

<style>

.div2{width:100px;height:30px;}

.div3{position:absolute;z-index:1;float:left;margin-left:100px;background:#fff}

.div2:hover>.div3{z-index:2;}

</style>

<ul><!--div1，在这里没毛用-->

<li class="div2">番茄

<ul class="div3" style="margin-top:-30px">

<li>番茄1</li>

<li>番茄2</li>

</ul>

</li>

<li class="div2">白菜


<ul class="div3" style="margin-top:-60px">

<li>白菜1</li>

<li>白菜2</li>

</ul></li></ul>

效果如图，不知道你想要的是不是这个