使用css的下拉菜单

Question

我使用以下css创建了一个下拉菜单

.menu li ul {display: none;}
.menu li:hover > ul {display: block;}

但问题是，当菜单下拉时，下面的内容会向下移动。我怎样才能防止这种情况。

Answer 1

您可以通过将子菜单置于绝对位置来防止这种情况。

.menu li ul {display: none; position: absolute; }

您还必须设置

.menu { position: relative; }

如Tae的评论所述。如果不这样做，子菜单可能会设置在页面的左上角。