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

-1

我在网上搜索了这里和其他地方的答案，但还没有找到任何解决了我的问题的东西。我也试图只包含相关的代码，但如果我包含一些不相关的东西，我很抱歉。如何防止下拉菜单移动/影响网页的内容/元素？

我已经有4个备选方案的导航条（或4个按钮，如果你愿意），其中第四个是3个是可见的，而徘徊在第四个按钮另外一个替代下拉菜单。我还在网页上添加了一个图像，但是我遇到的问题是，在悬停第四个选项并因此显示下拉菜单时，图像会移动。

我愿让这个图片，并为此事的任何额外的内容，停留在同一个地方，而光标悬停在第四替代。

HTML：

<body> 

<div id="logoquotebar"> 
</div> 

<a class="navbutton1" href="#"> Navbutton 1 </a> 
<a class="navbutton2" href="#"> Navbutton 2 </a> 
<a class="navbutton3" href="#"> Navbutton 3 </a> 
<a class="navbutton4" href="#"> Navbutton 4 </a> 

<div class="dropdowncontent" href="#"> 


<a id="link1" href="#"> Link 1 </a> 
<a id="link2" href="#"> Link 2 </a> 
<a id="link3" href="#"> Link 3 </a> 

</div> 

<div id="logopic"> 
<img src="E7.jpg" width="148" height="120"> 
</div> 

</body>

CSS：

#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; 
}

来源

2016-09-07 Max Svenman

尝试'absolute'或'fixed'定位我想......表现出一定的代码太 – kukkuz

我们不能帮你没有你的代码！ –

问题寻求帮助调试（“**为什么不是这个代码工作？**”）必须包括所期望的行为，一个具体问题或错误，并在问题本身所需要的最短的代码重现它** 。没有明确问题声明**的问题对其他读者无用。请参阅：[如何创建最小，完成和可验证示例]（http://stackoverflow.com/help/mcve）。 – j08691

.dropdowncontent { 

    position: absolute; 




}

来源

2016-09-07 14:52:56

只有代码答案不好，请添加说明 –

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

试试这个

来源

2016-09-07 15:20:43

.dropdowncontent { 
    position: fixed; 
}

这应该工作

来源

2016-09-07 19:37:49

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

回答

相关问题