我正在制作一个这样的主页：http://jsbin.com/umaguc/1/，我正在处理下拉菜单 . 现在我想要的是产生如下效果：http://www.script-tutorials.com/demos/249/index.html;我有一个div id="lavalamp" ，它有宽度，高度和背景颜色（看起来像一个矩形）;当 #nav ul li #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 元素上时，没有任何变化！希望你们能帮我解决这个问题..非常感谢！
1 回答
看起来您使用general sibling selector来选择
#lavalamp，但该元素永远不会显示为li元素的兄弟 .不幸的是，我不相信CSS有一种方法可以让你重新登上DOM来从
li找到你的#lavalamp. 您可以使用jQuery，或者您可以考虑重构标记的方法，这些方法可以通过纯CSS访问元素 .