HTML / CSS Div在悬停时扩展到父div之外

Question

I'm wondering if the following is possible. Have a <button> enclosed in a <div> which is enclosed in a parent <div> . On hover of the child <div> have a dropdown info panel that displays information like email and phone number. I've been working on this for a while (see my fiddle link below), but I can't get the drop down to appear anywhere outside of the parent <div> and moreover, the drop should appear directly below the button as opposed to on top of the button itself.

The button name is "Contact"

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

Answer 1

您的.navbar类溢出：隐藏阻止内容超出范围，我只是尝试删除该值，并在.drop-content类上添加一些top：50px，它显示良好。

Answer 2

The .drop-content has to be a child of the .dropdown element in order to be directly manipulated by it in CSS. You can use JavaScript or jQuery to accomplish this effect, or refactor the page so that .drop-content stays within the .dropdown div.

This is what the jQuery might look like:

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