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();
});