试着写一个jQuery-CSS下拉菜单。单击菜单时，其他元素会移动

Question

解释起来有些复杂（或者因为我的挫败感，我可能只是觉得语无伦次）所以我做了一个jsfiddle：http://jsfiddle.net/YmbMJ/

在结果部分，如果您一直滚动到右上角并单击“USERNAME”，菜单会下拉，但是当此菜单下拉时，导航中的2个元素也会随之下降。我试过玩CSS位置标签和z-index，但仍然没有运气。感谢任何和所有帮助

Answer 1

如果您将下拉菜单的position属性设置为absolute，则会将其从网页的常规流中删除，并且可以通过导航栏显示。只需像这样设置#corner_menu元素的CSS：

#corner_menu {
    position : absolute !important;
    top      : 50px !important;
    left     : 950px !important;
}

以下是演示：http://jsfiddle.net/YmbMJ/1/

我通常会使用right而不是left，因为该元素位于页面的右侧，但在这种情况下，我不想再根据需要更改CSS让right正常工作。父元素（#header）需要将position设置为static以外的其他内容（例如relative），并且还需要将其宽度更改为到达页面的两侧

Answer 2

你必须使用绝对位置来不影响菜单周围的其他div

我认为它会在下面的div附近但是需要稍微摆弄一下

#header ul{
   background-color: #CCCCCC;
    border-radius: 5px 0 5px 5px;
    float: right;
    position: absolute;
    right: 0;
    top: 50px;
    width: 150px;
}