CSS - 将鼠标悬停在li元素上时执行转换（下拉菜单）

Question

我正在制作一个这样的主页：http://jsbin.com/umaguc/1/我正在制作下拉菜单。现在我想要的是产生如下效果：http://www.script-tutorials.com/demos/249/index.html;我有一个div id="lavalamp"，它有宽度，高度和背景颜色（看起来像一个矩形）;当我悬停 #nav ul li元素之一（如Home，Game Offline，Game Online，Esport，Music ...）时，我希望移动此#lavalamp div并更改其宽度使它看起来像我上面提到的效果。 这是我的代码的想法：

#nav li:nth-of-type(1):hover ~ #lavalamp {
    left: 39px;
}

#nav li:nth-of-type(2):hover ~ #lavalamp {
    left:110px;
    width:110px;
}

但遗憾的是，这不起作用。当我将鼠标悬停在#nav ul li元素上时，没有任何变化！希望你们能解决这个问题..非常感谢！

Answer 1

您似乎已使用general sibling selector选择#lavalamp，但该元素永远不会显示为li元素的兄弟。

不幸的是，我不相信CSS会让你重新登上DOM来从#lavalamp转到li。您可以使用jQuery，或者您可以考虑重构标记的方法，这些方法可以通过纯CSS访问元素。