Html 如何防止下拉菜单移动/影响网页的内容/元素？

我在互联网上搜索了这里和其他地方的答案，但没有找到任何解决我问题的方法。我还试图只包含相关代码，但如果我包含了一些不相关的内容，我很抱歉

我制作了一个带有4个选项（或者4个按钮，如果你愿意的话）的导航栏，其中第四个是一个下拉菜单，另外3个选项在鼠标悬停在第四个按钮上时可见。我还向网页添加了一个图像，但我遇到的问题是，当悬停第四个选项并显示下拉菜单时，图像会移动

我希望这样，当光标悬停在第四个备选方案上时，图片和其他相关内容保持在同一位置

HTML:

试试这个

 .dropdowncontent {
   position: fixed;
 }

---

这应该行得通

试试

绝对

或

固定

定位，我想。。。展示一些代码，没有代码我们帮不了你！寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请看：.@kukkuz我已经尝试了固定位置，我刚刚学会了如何在问题中缩进代码。“呵呵！”保雷德蒙修好了，这是个问题！

#logoquotebar {
background-color:white;
width:1200px;
height:200px;
}

#logopic {
position:fixed;
margin-top:-160px;
}

.navbutton4 {
display:block;
width:236px;
height:35px;

background-color:#8B6969;
text-align:center;
line-height:33px;
font-family:Verdana;

-webkit-transition-duration:0.4s;
transition-duration:0.4s;

margin-left:964px;
margin-top:-35px;
}

.dropdowncontent {
display:none;
width:236px;
height:105px;

background-color:white;
text-align:center;
line-height:33px;
font-family:Verdana;

margin-left:964px;

-webkit-transition-duration:0.2s;
transition-duration:0.2s;

}

#link1 {
display:block;
width:236px;
height:35px;
}

#link2 {
display:block;
width:236px;
height:35px;
}

#link3 {
display:block;
width:236px;
height:35px;
}

.navbutton4:hover + .dropdowncontent {
display:block;
}

.dropdowncontent:hover {
display:block;
}

 .dropdowncontent {
   position: absolute;
   z-index:100;
 }

 .dropdowncontent {
   position: fixed;
 }