如何防止下拉菜單移動/影響網頁的內容/元素？

-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

如何防止下拉菜單移動/影響網頁的內容/元素？

回答

相關問題