HTML / CSS Div在懸停時擴展到父div之外

Question

我想知道以下是否可能。 將<button>包含在<div> ，將其包含在父<div> 。 將鼠標懸停在子<div>會有一個下拉信息面板，其中顯示諸如電子郵件和電話號碼之類的信息。 我已經為此工作了一段時間（請參閱下面的小提琴鏈接），但是我無法使下拉菜單顯示在父<div>之外的任何位置，而且，下拉菜單應直接出現在按鈕下方放在按鈕本身的頂部

按鈕名稱是“聯系人”

https://jsfiddle.net/wtj51d2f/5/

Answer 1

您的.navbar類溢出：隱藏阻止內容超出范圍，我只是嘗試刪除該值，並在.drop-content類上添加一些top：50px，它顯示良好。

Answer 2

.drop-content必須是.dropdown元素的子元素，才能在CSS中直接對其進行操作。 您可以使用JavaScript或jQuery完成此效果，也可以重構頁面，使.drop-content保持在.dropdown div之內。

這就是jQuery的樣子：

$('.dropdown').mouseover(function(){
    $('.drop-content').show();
});